{% extends "pages/abstract/base.html.twig" %}

{# Overrides blocks in head of base template #}
{% block page_title %}{{ translate("PASSWORD.RESET") }}{% endblock %}

{% block page_description %}{{ translate("PASSWORD.RESET.PAGE") }}{% endblock %}

{% block body_attributes %}
    class="hold-transition login-page"
{% endblock %}

{% block content %}
<div class="login-box">
    <div class="login-logo">
        <a href="{{ site.uri.public }}">{{ site.title }}</a>
    </div>
    <!-- /.login-logo -->

    <div class="login-box-body login-form">
        <p class="login-box-msg"><strong>{{ translate("PASSWORD.RESET") }}</strong></p>
        <p class="login-box-msg">{{ translate("PASSWORD.RESET.CHOOSE") }}</p>

        <div class="form-alerts" id="alerts-page"></div>

        <form id="set-or-reset-password" role="form" action="{{ site.uri.public }}/account/set-password" method="post"
              class="r-form">
            {% include "forms/csrf.html.twig" %}
            {# Prevent browsers from trying to autofill the password field.  See http://stackoverflow.com/a/23234498/2970321 #}
            <input type="text" style="display:none">
            <input type="password" style="display:none">

            <div class="form-group">
                <label class="sr-only" for="form-password">{{ translate("PASSWORD.NEW") }}</label>
                <input type="password" name="password"
                       placeholder="{{ translate("PASSWORD.BETWEEN", {min: 12, max: 100}) }}" class="form-control"
                       id="form-password">
            </div>

            <div class="form-group">
                <label class="sr-only" for="form-passwordc">{{ translate("PASSWORD.CONFIRM_NEW") }}</label>
                <input type="password" name="passwordc" placeholder="{{ translate("PASSWORD.CONFIRM_NEW_EXPLAIN") }}"
                       class="form-control" id="form-passwordc">
            </div>
            <input type="hidden" name="token" value="{{ token }}">
            <button type="submit" class="btn btn-block btn-primary">{{ translate("PASSWORD.RESET.SEND") }}</button>
        </form>
    </div>
    <!-- /.login-box-body -->
    {% endblock %}

    {% block scripts_page %}
        <!-- Include validation rules -->
        <script>
            {% include "pages/partials/page.js.twig" %}
        </script>

        <!-- Include page-specific JS bundle -->
        {{ assets.js('js/pages/set-or-reset-password') | raw }}

    {% endblock %}