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


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

{% block css %}
    <style>
        .login {
            margin-top: 40px;
            margin-bottom: 40px;
        }
    </style>
{% endblock css %}

{% block body %}

    <div class="row">
        <div class="medium-6 medium-centered large-4 large-centered columns login">

            <form method="POST">
                {% csrf_token %}
                <div class="callout">
                    <div class="row column log-in-form">
                        <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>
                        {{ form|foundation }}
                        <p>
                            <button type="submit" class="button expanded">{% trans "Reset Password" %}</button>
                        </p>
                    </div>
                </div>
            </form>

        </div>
    </div>

    <div class="reveal" id="password-modal" data-reveal>
        <h1>{% trans "Password Guide" %}</h1>
        <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>{% trans "We recommend selecting a long, but easy to remember password such as our awesome moon base rocks which would take an estimated septillion years to crack as opposed to a complex one like Jfjfy&65^87 which would take just over 600 years on a standard computer." %}</p>
        <button class="close-button" data-close aria-label="Close modal" type="button">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>

{% endblock body %}