{% extends '_layouts/base.html' %}
{% load static %}

{% block title %}Регистрация{% endblock %}

{% block add_css %}
    <link rel="stylesheet" href="{% static 'css/login.css' %}">
{% endblock %}

{% block content %}
    <div class="auth-page">
        {% include "_fragments/header.html" %}

        <main class="auth-section">
            <div class="container auth-layout auth-layout--reverse">
                <section class="auth-intro auth-intro--register">
                    <p class="auth-kicker">Новый аккаунт</p>
                    <h1 id="register-title" class="auth-title">Регистрация</h1>
                    <p class="auth-description">
                        Создайте аккаунт, чтобы получать персональные предложения, отслеживать покупки и сохранять нужные позиции.
                    </p>
                    <a class="auth-side-link" href="/services/">Посмотреть услуги</a>
                </section>

                <section class="auth-panel" aria-labelledby="register-title">
                    <form class="auth-form" action="" method="post">
                        {% csrf_token %}
                        {% if form.non_field_errors %}
                            <div class="auth-alert auth-alert--error">
                                {% for error in form.non_field_errors %}
                                    <p>{{ error }}</p>
                                {% endfor %}
                            </div>
                        {% endif %}

                        <div class="auth-field">
                            <label for="{{ form.full_name.id_for_label }}">Имя и фамилия</label>
                            <input
                                id="{{ form.full_name.id_for_label }}"
                                name="{{ form.full_name.html_name }}"
                                type="text"
                                value="{{ form.full_name.value|default:'' }}"
                                placeholder="Введите ваше имя"
                                autocomplete="name"
                            >
                            {% for error in form.full_name.errors %}
                                <p class="auth-field-error">{{ error }}</p>
                            {% endfor %}
                        </div>

                        <div class="auth-field">
                            <label for="{{ form.email.id_for_label }}">Электронная почта</label>
                            <input
                                id="{{ form.email.id_for_label }}"
                                name="{{ form.email.html_name }}"
                                type="email"
                                value="{{ form.email.value|default:'' }}"
                                placeholder="example@mail.ru"
                                autocomplete="email"
                            >
                            {% for error in form.email.errors %}
                                <p class="auth-field-error">{{ error }}</p>
                            {% endfor %}
                        </div>

                        <div class="auth-field">
                            <label for="{{ form.password1.id_for_label }}">Пароль</label>
                            <input
                                id="{{ form.password1.id_for_label }}"
                                name="{{ form.password1.html_name }}"
                                type="password"
                                placeholder="Придумайте пароль"
                                autocomplete="new-password"
                            >
                            {% for error in form.password1.errors %}
                                <p class="auth-field-error">{{ error }}</p>
                            {% endfor %}
                        </div>

                        <div class="auth-field">
                            <label for="{{ form.password2.id_for_label }}">Подтверждение пароля</label>
                            <input
                                id="{{ form.password2.id_for_label }}"
                                name="{{ form.password2.html_name }}"
                                type="password"
                                placeholder="Повторите пароль"
                                autocomplete="new-password"
                            >
                            {% for error in form.password2.errors %}
                                <p class="auth-field-error">{{ error }}</p>
                            {% endfor %}
                        </div>

                        <div class="register-auth-actions">
                            <button class="auth-submit" type="submit">Создать аккаунт</button>
                            <p class="auth-switch">
                                Уже есть аккаунт?
                                <a href="{% url 'users:login' %}">Войти</a>
                            </p>
                        </div>
                    </form>
                </section>
            </div>
        </main>

        {% include "_fragments/footer.html" %}
    </div>
{% endblock %}