{% extends "core/base.html" %}
{% 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">
                                    <li>- {% blocktrans %}Your password should be {{ request.press.password_length }} characters long.{% endblocktrans %}</li>
                                    {% if request.press.password_upper %}<li>- {% blocktrans %}Your password should contain at least one upper case letter."{% endblocktrans %} %}</li>{% endif %}
                                    {% if request.press.password_number %}<li>- {% blocktrans %}Your password should contain at least one number." %}{% endblocktrans %}</li>{% endif %}
                                </ul>
                                <p>{% blocktrans %}For more information read our
                                    <a href="#passwordmodal" class="modal-trigger">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 %}