{% extends "_layout" %}

{% set hideFooterWrap = true %}

{% block content %}
    <section class="reset-password">
        <div class="reset-password__container">
            <div class="reset-password__box">
                <h1 class="reset-password__title">{{ 'form.setpassword.title'|t }}</h1>
                <p class="reset-password__subtitle">
                    {{ 'form.setpassword.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="reset-password__form">
                    {{ csrfInput() }}
                    {{ actionInput('users/set-password') }}
                    {{ hiddenInput('code', code) }}
                    {{ hiddenInput('id', id) }}
                    {{ redirectInput('members-home') }}

                    <div class="reset-password__form-group">
                        <label for="newPassword" class="reset-password__label"
                        >{{ 'form.setpassword.password.label'|t }}</label
                        >
                        <div class="reset-password__password-wrapper">
                            <input
                                    type="password"
                                    id="newPassword"
                                    name="newPassword"
                                    class="reset-password__input reset-password__input--password"
                                    required
                            />
                            <button
                                    type="button"
                                    class="reset-password__password-toggle"
                                    aria-label="Toggle password visibility"
                            >
                                <i
                                        class="fa-solid fa-eye reset-password__password-icon reset-password__password-icon--show"
                                        aria-hidden="true"
                                ></i>
                                <i
                                        class="fa-solid fa-eye-slash reset-password__password-icon reset-password__password-icon--hide"
                                        aria-hidden="true"
                                        style="display: none"
                                ></i>
                            </button>
                        </div>
                        {% if errors is defined %}
                            {{ ul(errors, { class: 'login__error' }) }}
                        {% endif %}
                    </div>

                    <div class="reset-password__requirements">
                        <div class="reset-password__requirement" data-requirement="length">
                            <div class="reset-password__requirement-icon">
                                <i
                                        class="fa-solid fa-check reset-password__check-icon"
                                        aria-hidden="true"
                                ></i>
                            </div>
                            <span class="reset-password__requirement-text"
                            >{{ 'form.setpassword.rule1'|t }}</span
                            >
                        </div>

                        <div class="reset-password__requirement" data-requirement="special">
                            <div class="reset-password__requirement-icon">
                                <i
                                        class="fa-solid fa-check reset-password__check-icon"
                                        aria-hidden="true"
                                ></i>
                            </div>
                            <span class="reset-password__requirement-text"
                            >{{ 'form.setpassword.rule2'|t }}</span
                            >
                        </div>
                    </div>

                    <button type="submit" class="btn btn--primary reset-password__submit">
                        {{ 'form.setpassword.submit'|t }}
                    </button>
                </form>
            </div>
        </div>
    </section>
{% endblock %}

{% js "/assets/js/setpassword.js" %}