{% extends "registration/login.html" %}
{% load i18n %}
{% block sub_title %}{% trans "Signup" %} - {% endblock %}

{% block extra_style %}{{block.super}}
<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/bootstrap.popover.min.css" />
{% endblock %}

{% block main_content %}
<div class="login-panel-outer-container vh">
    <div class="login-panel">
        <h1 class="login-panel-hd">{% trans "Signup" %}</h1>
        {% if request.user.is_authenticated %}
        <p>{% trans "Welcome back, you are already signed in." %}</p>
        {% else %}
        <form action="" method="post" id="signup-form">{% csrf_token %}
            {% if form.name.field.required %}
            <label class="tp-reg-label" for="id_name">{% trans "Name" %}</label>
            {{ form.name }} {{ form.name.errors }}
            {% endif %}

            <label class="tp-reg-label" for="id_email">{% trans "Email" %}</label>
            {{ form.email }}            {{ form.email.errors }}
            <label class="tp-reg-label" for="id_password1">{% trans "Password" %}</label>
            {{ form.password1 }}        {{ form.password1.errors }}
            <div id="pwd_strength"></div>
            <label class="tp-reg-label" for="id_password2">{% trans "Confirm Password" %}</label>
            {{ form.password2 }}        {{ form.password2.errors }}

            {% if form.department.field.required %}
            <label class="tp-reg-label" for="id_department">{% trans "Department" %}</label>
            {{ form.department }}       {{ form.department.errors }}
            {% endif %}

            {% if form.telephone.field.required %}
            <label class="tp-reg-label" for="id_telephone">{% trans "Telephone" %}</label>
            {{ form.telephone }}        {{ form.telephone.errors }}
            {% endif %}

            {% if form.note.field.required %}
            <label class="tp-reg-label" for="id_note">{% trans "Note" %}</label>
            {{ form.note }}             {{ form.note.errors }}
            {% endif %}

            <p class="error hide"></p>
            <button type="submit" class="submit btn btn-primary btn-block">{% trans "Sign Up" %}</button>
        </form>
        <div class="login-panel-bottom-container">
            {# language will be shown here #}
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block extra_script %}{{ block.super }}
<script type="text/javascript" src="{{MEDIA_URL}}js/bootstrap.min.js"></script>
<script type="text/javascript">
{% if strong_pwd_required %}
{% include "snippets/password_strength_js.html" %}
var passwd_tip = "{% blocktrans %}Passwords must have at least {{min_len}} characters and contain {{level}} of the following: uppercase letters, lowercase letters, numbers, and symbols.{% endblocktrans%}";
$("#id_password1")
.popover({ // bootstrap plugin 'popover'
    container: 'body',
    content: passwd_tip,
    template: '<div class="popover" role="tooltip"><div class="arrow"></div><div class="popover-content"></div></div>',
    trigger: 'focus'
})
.on('keyup', function() {
    var pwd = $(this).val();
    if ($.trim(pwd)) {
        var level = getStrengthLevel(pwd);
        showStrength(level);
    } else {
        $("#pwd_strength").html("");
    }
});
{% endif %}

$('#signup-form').on('submit', function(){
    var email = $.trim($('input[name="email"]').val()),
        pwd1 = $.trim($('input[name="password1"]').val()),
        pwd2 = $.trim($('input[name="password2"]').val());
        level = getStrengthLevel(pwd1);

        if (!email) {
            $('.error').html("{% trans "Email cannot be blank" %}").removeClass('hide');
            return false;
        }
        if (!pwd1) {
            $('.error').html("{% trans "Password cannot be blank" %}").removeClass('hide');
            return false;
        }
        if (!pwd2) {
            $('.error').html("{% trans "Please enter the password again" %}").removeClass('hide');
            return false;
        }
        if (pwd1 != pwd2) {
            $('.error').html("{% trans "Passwords don't match" %}").removeClass('hide');
            return false;
        }
        {% if strong_pwd_required %}
            if (level < {{level}}) {
                $('.error').html(passwd_tip).removeClass('hide');
                return false;
            }
        {% endif %}
   });
</script>
{% endblock %}