{% extends "core/base.html" %}
{% load i18n %}
{% load materializecss %}

{% 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-content">
                    <div class="col-md-12">
                        <form method="POST">
                            {% csrf_token %}
                            <div class="form-group">
                                <span class="card-title">{% trans "Enter your new password twice to complete the reset process" %}:</span>
                                <p>{% trans "Password Rules" %}:</p>
                                <ul class="no-top-margin">
                                    <li>- {% blocktrans with password_length=request.press.password_length %}Your password should be {{ 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>
                                {{ form|materializecss }}
                                <br/>
                                <button type="submit"
                                        class="btn btn-primary btn-block">{% trans "Reset Password" %}</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div id="passwordmodal" class="modal">
        <div class="modal-content">
            <h4>{% trans "Password Guide" %}</h4>
            <p class="lead">{% trans "When it comes to passwords, length is better than complexity." %}</p>
            <p>{% trans "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)." %}</p>
            <p>{% blocktrans %}We recommend selecting a long, but easy to remember password such as <i>our awesome moon base
                rocks</i> which would take an estimated septillion years to crack as opposed to a complex one
                like <i>Jfjfy&65^87</i> which would take just over 600 years on a standard computer.{% endblocktrans %}</p>
        </div>
        <div class="modal-footer">
            <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">{% trans "Close" %}</a>
        </div>
    </div>
{% endblock body %}