{% extends "account.twig" %}

{% set view_title = 'Reset Password' %}
{% set view_icon = 'user-lock' %}
{% set view_description = 'Request a password reset, once you got the e-mail address, you can choose a new password' %}

{% 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'>Go back</a>
        {% else %}
            <h4 class="pb-4">Choose a new password</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="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="Confirm Password">
                </div>
                <div class="input-group mt-3">
                    <button type="button" class="btn btn-primary" id='btnResetPassword'>Submit</button>
                    <a href='/login' style='margin-left: 10px; display: none' id='backToLogin'>
                        <button class='btn btn-success' type='button'>
                            Back to Login
                        </button>
                    </a>
                </div>
            </form>
        {% endif %}
    {% else %}
        <p class='lead'>Enter your E-Mail address, to receive a password reset token.</p>
        <form>
            <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="E-Mail address" class="form-control" type="email" maxlength="64" />
            </div>
            <div class="input-group mt-2" style='position: absolute;bottom: 15px'>
                <button id='btnRequestPasswordReset' class='btn btn-primary'>
                    Request
                </button>
                <a href='/login' style='margin-left: 10px'>
                    <button class='btn btn-secondary' type='button'>
                        Back to Login
                    </button>
                </a>
            </div>
        </form>
    {% endif %}
{% endblock %}