{% 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">
                <section class="auth-intro auth-intro--login">
                    <p class="auth-kicker">Личный кабинет</p>
                    <h1 class="auth-title">Здравствуйте, {{ request.user.first_name|default:request.user.username }}</h1>
                    <p class="auth-description">
                        Ваш аккаунт активен и подтверждён. Здесь можно продолжить работу с заказами и персональными данными.
                    </p>
                    <a class="auth-side-link" href="/catalog/">Перейти в каталог</a>
                </section>
                <section class="auth-panel">
                    <div class="auth-copy-block">
                        <h2 class="auth-panel-title">Данные аккаунта</h2>
                        <p class="auth-panel-text"><strong>Email:</strong> {{ request.user.email }}</p>

                        {% if messages %}
                            {% for message in messages %}
                                <p class="auth-panel-text">{{ message }}</p>
                            {% endfor %}
                        {% endif %}

                        <form class="auth-form" method="post" action="{% url 'users:profile' %}">
                            {% csrf_token %}
                            <div class="auth-field">
                                <label for="{{ form.first_name.id_for_label }}">Имя</label>
                                <input
                                    id="{{ form.first_name.id_for_label }}"
                                    name="{{ form.first_name.html_name }}"
                                    type="text"
                                    value="{{ form.first_name.value|default:'' }}"
                                    autocomplete="given-name"
                                    required
                                >
                                {% for error in form.first_name.errors %}
                                    <p class="auth-field-error">{{ error }}</p>
                                {% endfor %}
                            </div>
                            <div class="auth-field">
                                <label for="{{ form.last_name.id_for_label }}">Фамилия</label>
                                <input
                                    id="{{ form.last_name.id_for_label }}"
                                    name="{{ form.last_name.html_name }}"
                                    type="text"
                                    value="{{ form.last_name.value|default:'' }}"
                                    autocomplete="family-name"
                                    required
                                >
                                {% for error in form.last_name.errors %}
                                    <p class="auth-field-error">{{ error }}</p>
                                {% endfor %}
                            </div>
                            <div class="auth-actions">
                                <button class="auth-submit" type="submit">Сохранить</button>
                            </div>
                        </form>

                        <form method="post" action="{% url 'users:logout' %}">
                            {% csrf_token %}
                            <div class="auth-actions">
                                <button class="auth-submit" type="submit">Выйти из аккаунта</button>
                            </div>
                        </form>
                    </div>
                </section>
            </div>
        </main>
        {% include "_fragments/footer.html" %}
    </div>
{% endblock %}