{% extends "account/pre_login_base.html" %}
{% load i18n %}
{% load static %}

{% block non_login_content %}
    <h1 class="h3 mb-3 fw-normal">{% trans "Become a member" %}</h1>

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

    {{ form.email.errors }}
    {{ form.password1.errors }}

    <p>{% trans "To become a member, you need to have an account. Create one here." %}</p>

    <form method="post" action="">
        {% csrf_token %}

        <label for="id_email"
               class="visually-hidden">
            {% trans "E-mail" %}
        </label>
        <input type="email"
               id="id_email"
               name="email"
               class="form-control mb-lg-2 {% if form.email.errors %}is-invalid{% elif form.is_bound %}is-valid{% endif %}"
               placeholder="{% trans "E-mail" %}"
               required
               autofocus>
        {% if form.email.errors %}
            {% for error in form.email.errors %}
                <div class="invalid-feedback">
                    {{ error }}
                </div>
            {% endfor %}
        {% endif %}

        <label for="id_password" class="visually-hidden">
            {% trans "Password" %}
        </label>
        <input type="password"
               id="id_password"
               name="password1"
               class="form-control mb-lg-2 {% if form.password1.errors %}is-invalid{% elif form.is_bound %}is-valid{% endif %}"
               placeholder="{% trans "Password" %}"
               required>
        {% if form.password1.errors %}
            {% for error in form.password1.errors %}
                <div class="invalid-feedback">
                    {{ error }}
                </div>
            {% endfor %}
        {% endif %}

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

        <button class="w-100 btn btn-lg btn-primary"
                type="submit">{% trans "Sign up" %}</button>
    </form>
    <hr>
    <a class="w-100"
       type="submit"
       href="{% url "account_login" %}">
        {% trans "To login" %}
    </a>

{% endblock %}
