{% extends "account/account_base.twig" %}

{% set view_title = 'account.reset_password_title' %}
{% set view_icon = 'user-lock' %}
{% set view_description = 'account.reset_password_description' %}

{% block view_content %}
    {% if view.token %}
        {% if not view.success %}
            <div class="alert alert-danger" role="alert">{{ view.message }}</div>
            <a href='/resetPassword' class='btn btn-primary'>{{ L('general.go_back') }}</a>
        {% else %}
            <h4 class="pb-4">{{ L('account.reset_password_form_title') }}</h4>
            <form>
                <input name='token' id='token' type='hidden' value='{{ view.token }}'/>
                <div class="input-group mt-3">
                    <div class="input-group-append">
                        <span class="input-group-text"><i class="fas fa-key"></i></span>
                    </div>
                    <input type="password" autocomplete='new-password' name='password' id='password' class="form-control"
                           placeholder="{{ L("account.password") }}">
                </div>
                <div class="input-group mt-3">
                    <div class="input-group-append">
                        <span class="input-group-text"><i class="fas fa-key"></i></span>
                    </div>
                    <input type="password" autocomplete='new-password' name='confirmPassword' id='confirmPassword' class="form-control"
                           placeholder="{{ L('account.password_confirm') }}">
                </div>
                <div class="input-group mt-3">
                    <button type="button" class="btn btn-primary" id='btnResetPassword'>
                        {{ L('general.submit') }}
                    </button>
                    <a href='/login' style='margin-left: 10px; display: none' id='backToLogin'>
                        <button class='btn btn-success' type='button'>
                            {{ L('account.back_to_login') }}
                        </button>
                    </a>
                </div>
            </form>
        {% endif %}
    {% else %}
        <form style="display: flex; flex-direction: column; justify-content: space-between; height: 100%">
            <div>
                <p class='lead'>
                    {{ L("account.reset_password_request_form_title") }}
                </p>
                <div class="input-group">
                    <div class="input-group-append">
                        <span class="input-group-text"><i class="fas fa-at"></i></span>
                    </div>
                    <input id="email" autocomplete='email' name="email" placeholder="{{ L('account.email') }}"
                           class="form-control" type="email" maxlength="64" />
                </div>
            </div>
            {% if site.captcha.enabled and site.captcha.provider == 'hcaptcha' %}
                <div class="h-captcha mt-2" data-sitekey="{{ site.captcha.site_key }}"></div>
            {% endif %}
            <div class="input-group mt-2">
                <button id='btnRequestPasswordReset' class='btn btn-primary'>
                    {{ L('general.submit') }}
                </button>
                <a href='/login' style='margin-left: 10px'>
                    <button class='btn btn-secondary' type='button'>
                        {{ L('account.back_to_login') }}
                    </button>
                </a>
            </div>
        </form>
    {% endif %}
{% endblock %}