<section class="panel">
    <h2><i data-feather="key"></i> {% if has_password %}Change{% else %}Set{% endif %} password</h2>

    <form action="{{ route('change-password') }}" method="POST" id="change-password-form">
        {% if has_password %}
            {{ macros.field(_locals, 'password', 'current_password', null, 'Current password') }}
            <p><a href="javascript: void(0);" class="switch-form-link">Forgot your password?</a></p>
        {% endif %}
        {{ macros.field(_locals, 'password', 'new_password', null, 'New password') }}
        {{ macros.field(_locals, 'password', 'new_password_confirmation', null, 'New password confirmation') }}

        <button type="submit"><i data-feather="save"></i> Save</button>

        {{ macros.csrf(getCsrfToken) }}
    </form>

    {% if has_password %}
        <form action="{{ route('remove-password') }}" method="POST" id="remove-password-form" class="hidden">
            <p><a href="javascript: void(0);" class="switch-form-link">Go back</a></p>

            <button type="submit" class="danger"><i data-feather="trash"></i> Remove password</button>

            {{ macros.csrf(getCsrfToken) }}
        </form>

        <script>
            document.addEventListener('DOMContentLoaded', () => {
                const changePasswordForm = document.getElementById('change-password-form');
                const removePasswordLink = changePasswordForm.querySelector('a.switch-form-link');
                const removePasswordForm = document.getElementById('remove-password-form');
                const changePasswordLink = removePasswordForm.querySelector('a.switch-form-link');

                removePasswordLink.addEventListener('click', () => {
                    changePasswordForm.classList.add('hidden');
                    removePasswordForm.classList.remove('hidden');
                });

                changePasswordLink.addEventListener('click', () => {
                    removePasswordForm.classList.add('hidden');
                    changePasswordForm.classList.remove('hidden');
                });
            });
        </script>
    {% endif %}
</section>