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

{% load static %}

{% block head_title %}
    Signup
{% endblock head_title %}

{% block inner %}

    <div class="authentication">
        <div class="authentication__content container">
            <img src="{% static 'images/logo.svg' %}" alt="EquiSeq Logo" width="48" height="48">

            <h1 class="authentication__title">Sign Up</h1>
            <p class="authentication__text">Already have an account? Then please
                <a class="authentication__link" href="{{ login_url }}">sign in</a>.
            </p>

            <div class="authentication__form-wrapper">
                <form class="form" id="signup_form" method="post" action="{% url 'account_signup' %}">
                    {% csrf_token %}

                    {% if form.errors %}
                        <ul class="errorlist nonfield">
                            {% for error in form.non_field_errors %}
                                <li>{{ error }}</li>
                            {% endfor %}
                        </ul>
                    {% endif %}

                    {% for field in form %}
                        <div class="form__input-group{% if field.errors %} form__error{% endif %}">
                            {{ field.label_tag }}
                            {{ field }}

                            {% if field.errors %}
                                <ul class="form__error-message">
                                    {% for error in field.errors %}
                                        <li>{{ error }}</li>
                                    {% endfor %}
                                </ul>
                            {% endif %}

                        </div>
                    {% endfor %}

                    {% if redirect_field_value %}
                        <input type="hidden"
                               name="{{ redirect_field_name }}"
                               value="{{ redirect_field_value }}"/>
                    {% endif %}

                    <button class="button" type="submit">Sign Up</button>
                </form>

            </div>
        </div>

        <div class="authentication__background"></div>
    </div>

{% endblock inner %}