{% extends "registration/base.html" %}

{% block style %}
    {{ block.super }}
    <style>
        .registration-label {
            color: #000000;
            margin-right: 10px;
            padding-right: 10px;
            float: left
        }
    </style>
{% endblock %}

{% block content %}
<div class="login-box password-reset">
    {% block login_logo %}
    <div class="login-logo">
        <a>{{ project_gui_name }}</a>
    </div>
    {% endblock %}

    <div class="login-box-body rounded">
        <p>Fields with `*` is required</p>
        <form method="post">
            {% csrf_token %}
            <fieldset class="module aligned">
                <div style="float: left">
                    {% block base_registration_fields %}
                        {% block auth_key_field %}
                            <div style="margin-bottom: 10px; clear:both; text-align:right; line-height:25px;">
                                {{ form.username.errors }}
                                <label for="id_username" class="registration-label">*Username:</label>
                                {{ form.username }}
                            </div>
                        {% endblock %}
                        {% block auth_email %}
                            <div style="margin-bottom: 10px; clear:both; text-align:right; line-height:25px;">
                                {{ form.email.errors }}
                                <label for="id_email" class="registration-label">*Email:</label>
                                {{ form.email }}
                            </div>
                        {% endblock %}
                        {% block registration_password_fields %}
                            <div style="margin-bottom: 10px; clear:both; text-align:right; line-height:25px;">
                                {{ form.password1.errors }}
                                <label for="id_password1" class="registration-label">*Password:</label>
                                {{ form.password1 }}
                            </div>
                            <div style="margin-bottom: 10px; clear:both; text-align:right; line-height:25px;">
                                {{ form.password2.errors }}
                                <label for="id_password2" class="registration-label">*Confirm password:</label>
                                {{ form.password2 }}
                            </div>
                        {% endblock %}
                    {% endblock %}
                    {% block additional_registration_fields %}
                    {% endblock %}
                </div>
                <div style="text-align: center; clear: both">
                    <input type="submit" value="Register" class="btn btn-primary">
                </div>

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


{% endblock %}