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

{% block non_login_content %}
    <div id="loginbox">
        <div class="login">
            <h2>{% trans "Become a member" %}</h2>

            {% 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 %}

                <div>
                    <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 %}
                </div>

                <div>
                    <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 %}
                </div>

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

                <button type="submit">{% trans "Sign up" %}</button>
            </form>
            <div>
                <a href="{% url "account_login" %}">
                    {% trans "To login" %}
                </a>
            </div>
        </div>
        <div class="signup">
            <img src="https://data.coop/static/img/logo_da.svg" alt="data.coop logo">
            <div class="new_here">
                <h2>{% trans "Are you new here?" %}</h2>
                <a class="button" href="{% url "account_signup" %}">{% trans "Become a member" %}</a>
            </div>
        </div>
    </div>
{% endblock %}