{% extends 'account/_auth_layout.html' %}{% load static %}{% load i18n %}{% load socialaccount %}
{% block main %}
    <section class="min-vh-100 d-flex bg-primary align-items-center">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-12 col-md-8 col-lg-6 justify-content-center">
                    <div class="card bg-primary shadow-soft border-light p-4">
                        <div class="card-header text-center pb-0">
                            <h2 class="mb-0 h5">{% if authentication_text.title %}{{ authentication_text.title }}{% else %}{% trans 'Account registration' %}{% endif %}</h2>
                            {% if authentication_text.description %}<p>{{ authentication_text.description|linebreaksbr }}</p>{% endif %}
                        </div>
                        <div class="card-body">
                            <form method="post" action="{% url 'account_signup' %}">
                                {% csrf_token %}
                                <!-- Непольові помилки (наприклад: паролі не збігаються) -->
                                {% if form.non_field_errors %}
                                    <div class="alert alert-danger">
                                        {% for error in form.non_field_errors %}
                                            <p>{{ error }}</p>
                                        {% endfor %}
                                    </div>
                                {% endif %}

                                <!-- Email -->
                                <div class="form-group">
                                    {% comment %}<label for="{{ form.email.id_for_label }}">{% trans "Your email" %}</label>{% endcomment %}
                                    <div class="input-group mb-4">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text"><span class="fas fa-envelope"></span></span>
                                        </div>
                                        <input
                                                type="email"
                                                name="{{ form.email.name }}"
                                                id="{{ form.email.id_for_label }}"
                                                value="{{ form.email.value|default_if_none:'' }}"
                                                class="form-control {% if form.email.errors %}is-invalid{% endif %}"
                                                placeholder="{% trans "example@company.com" %}"
                                                aria-label="{% trans "Email address" %}"
                                                required>
                                        {% for error in form.email.errors %}
                                            <div class="invalid-feedback">{{ error }}</div>
                                        {% endfor %}
                                    </div>
                                </div>

                                <!-- Пароль -->
                                <div class="form-group">
                                    {% comment %}<label for="{{ form.password1.id_for_label }}">{% trans 'Password' %}</label>{% endcomment %}
                                    <div class="input-group mb-4">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text"><span class="fas fa-unlock-alt"></span></span>
                                        </div>
                                        <input
                                                type="password"
                                                name="{{ form.password1.name }}"
                                                id="{{ form.password1.id_for_label }}"
                                                value=""
                                                class="form-control {% if form.password1.errors %}is-invalid{% endif %}"
                                                placeholder="{% trans "Password" %}"
                                                aria-label="{% trans "Password" %}"
                                                required>
                                        {% for error in form.password1.errors %}
                                            <div class="invalid-feedback">{{ error }}</div>
                                        {% endfor %}
                                    </div>
                                </div>

                                <!-- Повтор пароля -->
                                <div class="form-group">
                                    {% comment %}<label for="{{ form.password2.id_for_label }}">{% trans 'Confirm password' %}</label>{% endcomment %}
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text"><span class="fas fa-unlock-alt"></span></span>
                                        </div>
                                        <input
                                                type="password"
                                                name="{{ form.password2.name }}"
                                                id="{{ form.password2.id_for_label }}"
                                                value=""
                                                class="form-control {% if form.password2.errors %}is-invalid{% endif %}"
                                                placeholder="{% trans "Confirm password" %}"
                                                aria-label="{% trans "Confirm password" %}"
                                                required>
                                        {% for error in form.password2.errors %}
                                            <div class="invalid-feedback">{{ error }}</div>
                                        {% endfor %}
                                    </div>
                                </div>

                                <!-- Чекбокс: Умови реєстрації -->
                                <div class="form-check mb-4">
                                    <input
                                            class="form-check-input"
                                            type="checkbox"
                                            id="defaultCheck6"
                                            name="terms"
                                            required>
                                    <label class="form-check-label" for="defaultCheck6">
                                        {% trans 'I agree with' %} <a href="#">{% trans 'registration terms' %}</a>
                                    </label>
                                </div>

                                <!-- Кнопка -->
                                <button type="submit" class="btn btn-block btn-primary">{% if authentication_text.submit_text %}{{ authentication_text.submit_text }}{% else %}{% trans 'Register' %}{% endif %}</button>
                            </form>

                            {% comment %}<div class="mt-3 mb-4 text-center">
                                <span class="font-weight-normal">{% trans 'or' %}</span>
                            </div>
                            <div class="btn-wrapper my-4 text-center">
                                <a class="btn btn-google-auth btn-block" href="{% provider_login_url 'google' process='login' %}">
                                    <svg class="btn-google-auth__icon" aria-hidden="true" viewBox="0 0 24 24">
                                        <path fill="#4285F4" d="M21.6 12.23c0-.71-.06-1.4-.18-2.07H12v3.91h5.38a4.6 4.6 0 0 1-2 3.02v2.54h3.24c1.9-1.75 2.98-4.33 2.98-7.4Z"/>
                                        <path fill="#34A853" d="M12 22c2.7 0 4.97-.9 6.62-2.43l-3.24-2.54c-.9.6-2.05.96-3.38.96-2.6 0-4.81-1.76-5.6-4.13H3.06v2.62A10 10 0 0 0 12 22Z"/>
                                        <path fill="#FBBC05" d="M6.4 13.86A6 6 0 0 1 6.08 12c0-.65.11-1.28.32-1.86V7.52H3.06A10 10 0 0 0 2 12c0 1.61.39 3.14 1.06 4.48l3.34-2.62Z"/>
                                        <path fill="#EA4335" d="M12 6.01c1.47 0 2.79.51 3.83 1.5l2.87-2.88A9.64 9.64 0 0 0 12 2a10 10 0 0 0-8.94 5.52l3.34 2.62C7.19 7.77 9.4 6.01 12 6.01Z"/>
                                    </svg>
                                    <span>{% trans "Continue with Google" %}</span>
                                </a>
                            </div>{% endcomment %}
                            <div class="d-block d-sm-flex justify-content-center align-items-center mt-4 text-center">
                                    <span class="font-weight-normal">
                                        {% trans 'If you have already registered' %}
                                        <a href="{% url 'account_login' %}" class="font-weight-bold" rel="nofollow">{% trans 'Sign in' %}</a>
                                    </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
{% endblock %}