{% extends "base.html" %}
{% block title %}Register{% endblock %}
{% block content %}

    {{ header("Register", "It's fast and easy to make an account.") }}


    <div class="container">
        <div class="page-header">
            <h1>Registration</h1>
        </div>

        <div class="security_box">
            <h4>Already have an account?</h4>


            <a href="/n/login"
                class="btn btn-info modalize">Sign in using existing account</a>


            <hr />

            <h4>Don't have an account?</h4>

            <h5>Register here</h5>

            {% if errors %}
                <div class="alert alert-error">
                    <strong>Please note:</strong>
                    <ul>
                        {% for error in errors %}
                            <li>{{error}}</li>
                        {% endfor %}
                    </ul>
                </div>
            {% endif %}

            <form class="form-horizontal" action="/n/register" data-validate="parsley"
                  method="POST" name="login_user_form">
                <fieldset>

                    <div class="control-group">
                        <label class="control-label" for="email_address">Email Address</label>
                        <div class="controls">
                            <input id="email_address" name="email_address" class="focused" type="text" size="50" value="{{values.email_address}}"
                                   data-trigger="change" data-required="true" data-type="email" data-maxlength="50">
                        </div>
                    </div>

                    <div class="control-group">
                        <label class="control-label" for="full_name">Full Name</label>
                        <div class="controls">
                            <input id="full_name" name="full_name" type="text" size="50" value="{{values.full_name}}"
                                   data-trigger="change" data-required="true" data-minlength="5" data-maxlength="50">
                        </div>
                    </div>

                    <div class="control-group">
                        <label class="control-label" for="organization">Organization</label>
                        <div class="controls">
                            <input id="organization" name="organization" type="text" size="50" value="{{values.organization}}" data-minlength="3" data-maxlength="50">
                        </div>
                    </div>

                    <div class="control-group">
                        <label class="control-label" for="password">Password</label>
                        <div class="controls">
                            <input id="password" name="password" type="password" size="50" value=""
                                   data-trigger="change" data-required="true" data-minlength="6">
                        </div>
                    </div>

                    <div class="control-group" style="display: none" id="password_alert">
                        <div class="controls"">
                            <span id="password_strength" class="alert"></span>
                        </div>
                    </div>

                    <div class="control-group">
                        <label class="control-label" for="password_confirm">Confirm Password</label>
                        <div class="controls">
                            <input id="password" name="password_confirm" type="password" size="50" value=""
                                   data-trigger="change" data-required="true" data-equalto="#password">
                        </div>
                    </div>

                    <div class="control-group">
                        <div class="controls" style="margin-top: 10px;">
                            <input class="btn btn-primary" id="submit" name="submit" type="submit" value="Create account">
                        </div>
                    </div>

                </fieldset>

            </form>
        </div>
    </div>

{% endblock %}

{% block js %}

    <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='zxcvbn/zxcvbn.js') }}"></script>
    <script type="text/javascript" src="/static/new/javascript/password_strength.js"></script>
{% endblock %}