{% extends "base.html" %}
{% load compress hc_extras static %}

{% block content %}
<div class="row">
    <div class="col-sm-6 col-sm-offset-3">
        <div class="hc-dialog">
            <h1>Set a Password</h1>
            <div class="dialog-body">
                <p>
                    Please pick a password for your {{ site_name }} account.
                </p>
            </div>

            <form method="post">
                {% csrf_token %}

                <div id="set-password-group" class="form-group">
                    <input
                        id="password"
                        type="password"
                        minlength="8"
                        class="form-control input-lg"
                        name="password"
                        placeholder="pick a password (at least 8 characters)"
                        required>
                    <div id="meter">
                        <div class="s0 s1 s2 s3 s4"></div>
                        <div class="s1 s2 s3 s4"></div>
                        <div class="s2 s3 s4"></div>
                        <div class="s3 s4"></div>
                    </div>
                </div>

                <div class="clearfix">
                    <button type="submit" class="btn btn-lg btn-primary pull-right">
                        Set Password
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
{% compress js %}
<script src="{% static 'js/zxcvbn.min.js' %}"></script>
<script src="{% static 'js/set-password.js' %}"></script>
{% endcompress %}
{% endblock %}