{% extends "_layout" %}

{% set hideFooterWrap = true %}

{% block content %}
    {% if craft.app.session.hasFlash('info') %}
        <section class="article-content">
            <div class="password-reset-success__container">
                <div class="password-reset-success__box">
                    <div class="login__general-info">
                        <div class="login__general-info_icon">
                            <i class="fa-solid fa-circle-info"></i>
                        </div>
                        {{ craft.app.session.getFlash('info')|raw }}
                    </div>
                </div>
            </div>
        </section>
    {% endif %}
    <section class="login">
        <div class="login__container">


            <div class="login__box">
                <h1 class="login__title">{{ 'form.login.title'|t }}</h1>
                <p class="login__subtitle">{{ 'form.login.intro'|t }}</p>

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

                {% set message = craft.app.session.getFlash('success') %}
                {% if message %}
                    <div class="flash-message general-success">
                        {{ message }}
                    </div>
                {% endif %}

                <form method="post" accept-charset="UTF-8" class="login__form">
                    {{ csrfInput() }}
                    {{ actionInput('users/login') }}

                    <div class="login__form-group">
                        <label for="email" class="login__label">{{ 'form.login.username.label'|t }}</label>
                        {{ input('email', 'loginName', craft.app.user.rememberedUsername, {
                            id: 'email',
                            autocomplete: 'username',
                            class: 'login__input',
                            placeholder: 'form.login.username.placeholder'|t,
                            required: 'required',
                        }) }}
                        <span class="login__error" style="display: none">
                            {{ 'form.login.username.error' }}
                        </span>
                    </div>

                    <div class="login__form-group">
                        <label for="password" class="login__label">{{ 'form.login.password.label'|t }}</label>
                        <div class="login__password-wrapper">
                            {{ input('password', 'password', null, {
                                id: 'password',
                                class: 'login__input login__input--password',
                                required: 'required',
                            }) }}
                            <button
                                    type="button"
                                    class="login__password-toggle"
                                    aria-label="Toggle password visibility"
                            >
                                <i
                                        class="fa-solid fa-eye login__password-icon login__password-icon--show"
                                        aria-hidden="true"
                                ></i>
                                <i
                                        class="fa-solid fa-eye-slash login__password-icon login__password-icon--hide"
                                        aria-hidden="true"
                                        style="display: none"
                                ></i>
                            </button>
                        </div>
                        <a href="{{ url('reset-password') }}" class="login__forgot-link">{{ 'form.login.forgotPassword'|t }}</a>
                    </div>

                    <div class="login__options">
                        <label class="checkbox__label">
                            {{ input('checkbox', 'rememberMe', '1', {
                                class: 'checkbox__input'
                            }) }}
                            <span class="checkbox__text">{{ 'form.login.rememberMe'|t }}</span>
                        </label>
                    </div>

                    <!-- Submit Button -->
                    {{ craft.recaptcha.renderBindButton('login-submit') }}
                    <button type="submit" id="login-submit" class="btn btn--primary login__submit">
                        {{ 'form.login.submit'|t }}
                    </button>
                </form>

                {% set registrationEntry = craft.entries.section('registration').one() %}
                <p class="login__register">
                    {{ 'form.login.register.text'|t }}
                    <a href="{{ registrationEntry.url }}" class="login__register-link">{{ 'form.login.register.label'|t }}</a>
                </p>
            </div>
        </div>
    </section>
{% endblock %}

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