{% extends "_layout" %}

{% set hideFooterWrap = true %}

{% block content %}
<section class="forgot-password">
    <div class="forgot-password__container">
        <div class="forgot-password__box">
            <h1 class="forgot-password__title">{{ 'form.resetPassword.title'|t }}</h1>
            <p class="forgot-password__subtitle">
                {{ 'form.resetPassword.intro'|t }}
            </p>

            {% if craft.app.session.hasFlash('error') %}
                <div class="login__general-error">
                    {{ craft.app.session.getFlash('error') }}
                </div>
            {% endif %}

            <form method="post" accept-charset="UTF-8" class="forgot-password__form">
                {{ csrfInput() }}
                {{ actionInput('users/send-password-reset-email') }}
                {{ redirectInput('reset-password-confirmation') }}

                <div class="forgot-password__form-group">
                    <label for="email" class="forgot-password__label">{{ 'form.resetPassword.username.label'|t }}</label>
                    {{ input('text', 'loginName', loginName ?? craft.app.user.rememberedUsername, {
                        id: 'email',
                        autocomplete: 'username',
                        class: 'forgot-password__input',
                        placeholder: 'form.login.username.placeholder'|t,
                        required: 'required',
                    }) }}
                    <span class="forgot-password__error" style="display: none">
                        {{ 'form.resetPassword.username.error'|t }}
                    </span>
                    <span class="forgot-password__hint">
                        {{ 'form.resetPassword.username.hint'|t }}
                    </span>
                </div>

                {{ craft.recaptcha.renderBindButton('resetPassword-submit') }}
                <button type="submit" class="btn btn--primary forgot-password__submit" id="resetPassword-submit">
                    {{ 'form.resetPassword.submit'|t }}
                </button>
            </form>
        </div>
    </div>
</section>
{% endblock %}

{% js "/assets/js/reset-password.js" %}