{% extends "base.htm" %} {% load static %} {% load i18n %} {% block loading_mask %} {% endblock loading_mask %} {% block body %}

<div id="container" class="cls-container arches-login">

    <!-- BACKGROUND IMAGE -->
    <!--===================================================
    <div id="bg-overlay" class="bg-img img-login"></div>
    -->

    <!-- LOGIN FORM -->
    <div class="cls-content arches-signin">
        <div class="cls-content-sm panel login-panel" style="width: 350px;">
            <div class="panel-body">
                <header>
                    <h1 class="login-panel-header arches-signin">{% trans "Create Account" %}</h1>
                </header>

                <main>
                    <form class="change-password-form" action="?next={{ next }}" method='POST' {% if auth_failed %} autocomplete="off" {% endif %}>
                        {% csrf_token %}
                        <div>
                            {% if form.errors %}
                            <p class="errornote">
                                {% if form.errors.items|length == 1 %}{% trans "Please correct the error below." %}{% else %}{% trans "Please correct the errors below." %}{% endif %}
                                {% if form.ts.errors %}
                                {% for error in form.ts.errors %}
                                    <div style="color:darkred">{{ error|escape }}</div>
                                {% endfor %}
                                {% endif %}
                            </p>
                            {% endif %}

                            {{ confirmation_message | safe }}

                            {% if showform %}
                                <fieldset>
                                    <legend class="arches-signin-subtext">
                                        {% trans "Register to access data modeling, editing, and discovery tools." %}
                                    </legend>

                                    <div class="form-group" style="padding-bottom: 1.2em;">
                                        <div class="input-group">
                                                <div class="input-group-addon"><i class="ion-compose"></i></div>
                                                <div class="floating-label-group">
                                                    <input type="text" class="form-control input-lg floating-label-input" id='username' name='username' autofocus required value='{{postdata.username}}'>
                                                    <label for="username" class="floating-label"> {% trans "Username" %} </label>
                                                </div>
                                        </div>
                                        {% if form.username.errors %}
                                        {% for error in form.username.errors %}
                                            <div style="color:darkred">{{ error|escape }}</div>
                                        {% endfor %}
                                        {% endif %}
                                    </div>
    
                                    <div class="form-group" style="padding-bottom: 1.2em;">
                                        <div class="input-group">
                                                <div class="input-group-addon"><i class="ion-compose"></i></div>
                                                <div class="floating-label-group">
                                                    <input type="text" class="form-control input-lg floating-label-input"  id='first_name' name='first_name' autofocus required value='{{postdata.first_name}}'>
                                                    <label for="first_name" class="floating-label"> {% trans "First Name" %} </label>
                                                </div>
                                        </div>
                                        {% if form.first_name.errors %}
                                        {% for error in form.first_name.errors %}
                                            <div style="color:darkred">{{ error|escape }}</div>
                                        {% endfor %}
                                        {% endif %}
                                    </div>
    
                                    <div class="form-group" style="padding-bottom: 1.2em;">
                                        <div class="input-group">
                                                <div class="input-group-addon"><i class="ion-compose"></i></div>
                                                <div class="floating-label-group">
                                                    <input type="text" class="form-control input-lg floating-label-input"  id='last_name' name='last_name' required value='{{postdata.last_name}}'>
                                                    <label for="last_name" class="floating-label"> {% trans "Last Name" %} </label>
                                                </div>
                                        </div>
                                        {% if form.last_name.errors %}
                                        {% for error in form.last_name.errors %}
                                            <div style="color:darkred">{{ error|escape }}</div>
                                        {% endfor %}
                                        {% endif %}
                                    </div>
    
                                    <div class="form-group" style="padding-bottom: 1.2em;">
                                        <div class="input-group">
                                                <div class="input-group-addon"><i class="ion-email"></i></div>
                                                <div class="floating-label-group">
                                                    <input type="text" class="form-control input-lg floating-label-input" id='email' name='email' required value='{{postdata.email}}'>
                                                    <label for="email" class="floating-label"> {% trans "Email" %} </label>
                                                </div>
                                        </div>
                                        {% if form.email.errors %}
                                        {% for error in form.email.errors %}
                                            <div style="color:darkred">{{ error|escape }}</div>
                                        {% endfor %}
                                        {% endif %}
                                    </div>
    
                                    <div class="form-group" style="padding-bottom: 1.2em;">
                                        <div class="input-group">
                                                <div class="input-group-addon"><i class="ion-asterisk"></i></div>
                                                <div class="floating-label-group">
                                                    <input type="password" class="form-control input-lg floating-label-input" id='password1' name='password1' required>
                                                    <label for="password1" class="floating-label"> {% trans "Password" %} </label>
                                                </div>
                                        </div>
                                        {% if form.password1.errors %}
                                        {% for error in form.password1.errors %}
                                            <div style="color:darkred">{{ error|escape }}</div>
                                        {% endfor %}
                                        {% endif %}
                                    </div>
    
                                    <div class="form-group" style="padding-bottom: 1.2em;">
                                        <div class="input-group">
                                                <div class="input-group-addon"><i class="ion-asterisk"></i></div>
                                                <div class="floating-label-group">
                                                    <input type="password" class="form-control input-lg floating-label-input"  id='password2' name='password2' required>
                                                    <label for="password2" class="floating-label"> {% trans "Confirm Password" %} </label>
                                                </div>
                                        </div>
                                        {% if form.password2.errors %}
                                        {% for error in form.password2.errors %}
                                            <div style="color:darkred">{{ error|escape }}</div>
                                        {% endfor %}
                                        {% endif %}
                                    </div>
    
                                    <div class="form-group">
                                        <div class="arches-signin-btn" style="padding-bottom: 0px;">
                                            {% if showform %}
                                            <button class="btn btn-primary btn-lg btn-block" type="submit">{% trans "Signup" %}</button>
                                            {% endif %}
                                        </div>
                                    </div>
    
                                    <div class="password-rules" style="text-align: start;">
                                        {% trans 'Your password must:' %}
                                        <ul class="list-unstyled">
                                            {% for message in validation_help %}
                                            <li class="password-rule"><i class="ion-checkmark-circled"></i><span>{{ message }}</span></li>
                                            {% endfor %}
                                        </ul>
                                    </div>
    
                                    {% if enable_captcha %}
                                        <div class="form-group">
                                        {{form.captcha}}
                                        </div>
                                    {% endif %}
                                </fieldset>
                            {% endif %}
                        </div>
                    </form>
                </main>
            </div>

            <footer class="panel-footer">
                {% trans "Learn more about <a href='http://www.archesproject.org'>Arches</a>" %}
            </footer>

        </div>
    </div>
    <div class="pad-ver hidden">
        <a href="arches_password_reminder.html" class="btn-link mar-rgt">{% trans "Forgot password ?" %}</a>
        <a href="arches_register.html" class="btn-link mar-lft">{% trans "Create a new account" %}</a>
    </div>
</div>

</div>

{% endblock body %}
