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

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

{% block page_description %}{{translate("PASSWORD.CREATE.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.CREATE")}}</strong></p>
        <p class="login-box-msg">{{translate("WELCOME_TO", {'title': site.title})}} {{translate("PASSWORD.CREATE.PAGE")}}</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')}}</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')}}</label>
                <input type="password" name="passwordc" placeholder="{{translate('PASSWORD.CONFIRM')}}" 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.CREATE.SET')}}</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 %}