{% extends "core/base.html" %}
{% comment %}
  This template is deprecated. Account pages are now part of the back-office.
{% endcomment %}

{% load i18n %}
{% load bootstrap4 %}

{% block title %}{% trans "Reset Password" %}{% endblock title %}

{% block body %}
    <div class="row">
        <div class="col-md-6 offset-md-3">
            <div class="card">
                <div class="card-block">
                    <div class="col-md-12">
                        <form method="POST">
                            {% csrf_token %}
                            <div class="form-group">
                                <h5>{% trans "Enter your new password twice to complete the reset process" %}:</h5>
                                <p>{% trans "Password Rules" %}:</p>
                                <ul class="no-top-margin">
                                  {% include "common/elements/password_rules.html" %}
                                </ul>
                                <p>
                                  {% blocktrans trimmed %}
                                    For more information read our <a href="#" data-toggle="modal" data-target="#passwordmodal">password guide</a>.
                                  {% endblocktrans %}
                                </p>
                                {% bootstrap_form form %}
                                <br/>
                                <button type="submit"
                                        class="btn btn-primary btn-block">{% trans "Reset Password" %}</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="passwordmodal" tabindex="-1" role="dialog" aria-labelledby="passwordmodal"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLongTitle">{% trans 'Password Guide' %}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p class="lead">{% trans 'When it comes to passwords, length is better than complexity.' %}</p>
                    <p>{% blocktrans %}Its a common myth that a short and complex password (Jfjfy&65^87) is more secure than a long and
                        uncomplicated password (our awesome moon base rocks).{% endblocktrans %}</p>
                    <p>{% blocktrans %}We recommend selecting a long, but easy to remember password such as <em>our awesome moon base
                        rocks</em> which would take an estimated septillion years to crack as opposed to a complex one
                        like <em>Jfjfy&65^87</em> which would take just over 600 years on a standard computer.{% endblocktrans %}</p>

                </div>
            </div>
        </div>
    </div>
{% endblock body %}