{% extends "zerver/portico_signup.html" %}
{% block customhead %}
{{ super() }}
{{ minified_js('zxcvbn')|safe }}
{% endblock %}

{% block portico_content %}

<div class="password-container">
    <div class="password-reset">
        <!-- TODO: Ask about meta viewport 1:1 scaling -->
        <div class="pitch">
            <h3>{{ _('Reset your password.') }}</h3>
        </div>

        {% if validlink %}
        <form method="post" id="password_reset" class="form-horizontal" autocomplete="off">
            {{ csrf_input }}
            <div class="input-group" id="email-section">
                <label for="id_email">{{ _("Email") }}</label>
                <div>
                    <input type="text" name="name" placeholder='{{ form.user.email }}' disabled />
                </div>
            </div>

            <div class="input-group">
                <label for="id_new_password1" class="">{{ _('Password') }}</label>
                <div class="">
                    <input id="id_new_password1" class="required" type="password" name="new_password1"
                           value="{% if form.new_password1.value() %}{{ form.new_password1.value() }}{% endif %}"
                           maxlength="100"
                           data-min-length="{{password_min_length}}"
                           data-min-quality="{{password_min_quality}}" />
                    {% if form.new_password1.errors %}
                        {% for error in form.new_password1.errors %}
                        <div class="alert alert-error">{{ error }}</div>
                        {% endfor %}
                    {% endif %}
                </div>
            </div>
            <div class="input-group">
                <label class="">{{ _('Password strength') }}</label>
                <div class="">
                    <div class="progress" id="pw_strength">
                        <div class="bar bar-danger" style="width: 10%;"></div>
                    </div>
                </div>
            </div>
            <div class="input-group">
                <label for="id_new_password2" class="">{{ _('Confirm password') }}</label>
                <div class="">
                    <input id="id_new_password2" class="required" type="password" name="new_password2"
                           value="{% if form.new_password2.value() %}{{ form.new_password2.value() }}{% endif %}"
                           maxlength="100" />
                    {% if form.new_password2.errors %}
                        {% for error in form.new_password2.errors %}
                        <div class="alert alert-error">{{ error }}</div>
                        {% endfor %}
                    {% endif %}
                </div>
            </div>

            <div class="input-group m-t-30">
                <div class="centered-button">
                    <input type="submit" class="btn btn-primary" value="Submit" />
                </div>
            </div>
        </form>

        <script type="text/javascript">
            autofocus('#id_new_password1');
        </script>
        {% else %}
        <p>{{ _('Sorry, the link you provided is invalid or has already been used.') }}</p>
        {% endif %}
    </div>
</div>

{% endblock %}