{% extends "django_simple_account/common.html" %}
{% load static %}
{% load i18n %}

{% block title %}{% trans "Sign into your account" %}{% endblock %}

{% block content %}
    <div class="brand-wrapper">
        <img src="{% static "django_simple_account/assets/images/logo.svg" %}" alt="logo" class="logo">
    </div>
    <p class="login-card-description">{% trans "Sign Up" %}</p>

    {% if form.non_field_errors %}
        <div class="alert alert-danger div-max-width" role="alert">
            {% for error in form.non_field_errors %}
                {{ error }}
            {% endfor %}
        </div>
    {% endif %}

    <form method="post">
        {% csrf_token %}
        {% for field in form %}
            <div class="form-group">
                <label for="{{ field.auto_id }}">{{ field.label|capfirst }}</label>
                {{ field }}
                {% for error in field.errors %}
                    <small id="{{ field.auto_id }}" class="form-text text-danger">{{ error }}</small>
                {% endfor %}
            </div>
        {% endfor %}
        <input name="login" id="login" class="btn btn-block login-btn mb-4" type="submit"  value="{% trans "Sign Up" %}">
    </form>

    <div style="padding-bottom: 20px;">
        {% if request.GET.urlencode %}
            <a href="{% url 'django-simple-account:forgotpassword' %}?{{ request.GET.urlencode }}" class="forgot-password-link">{% trans "Forgot password?" %}</a>
        {% else %}
            <a href="{% url 'django-simple-account:forgotpassword' %}" class="forgot-password-link">{% trans "Forgot password?" %}</a>
        {% endif %}
    </div>
    <p class="login-card-footer-text">
        {% trans "I have an account?" %}
        {% if request.GET.urlencode %}
            <a href="{% url 'django-simple-account:login' %}?{{ request.GET.urlencode }}" class="text-underline text-reset">{% trans "Login here" %}</a>
        {% else %}
            <a href="{% url 'django-simple-account:login' %}" class="text-underline text-reset">{% trans "Login here" %}</a>
        {% endif %}
    </p>
    </div>
{% endblock %}
