{% extends 'wrapper.html' %}
{% load static %}

{% block content %}
<div class="auth-container">
    <div class="auth-card" data-aos="fade-up">
        <div class="auth-header">
            <a href="{% url 'index' %}" class="logo">
                <img src="{% static 'img/logo.png' %}" alt="deev.space" style="max-width: 130px; height: auto;">
            </a>
            <h1 class="auth-title">Регистрация</h1>
            <p class="auth-subtitle">Создайте аккаунт для участия в обсуждениях</p>
        </div>
        
        <form method="post" class="auth-form">
            {% csrf_token %}
            
            {% if form.non_field_errors %}
            <div class="auth-error">
                <i class="fas fa-exclamation-circle"></i>
                {{ form.non_field_errors.0 }}
            </div>
            {% endif %}
            
            <div class="form-group">
                <label for="id_username" class="form-label">
                    <i class="fas fa-user"></i>
                    Имя пользователя *
                </label>
                {{ form.username }}
                <span class="form-hint">Только латинские буквы, цифры и подчёркивания</span>
                {% if form.username.errors %}
                <span class="form-error">{{ form.username.errors.0 }}</span>
                {% endif %}
            </div>
            
            <div class="form-group">
                <label for="id_email" class="form-label">
                    <i class="fas fa-envelope"></i>
                    Email
                </label>
                {{ form.email }}
                <span class="form-hint">Необязательно, но нужен для восстановления пароля</span>
                {% if form.email.errors %}
                <span class="form-error">{{ form.email.errors.0 }}</span>
                {% endif %}
            </div>
            
            <div class="form-group">
                <label for="id_password" class="form-label">
                    <i class="fas fa-lock"></i>
                    Пароль *
                </label>
                {{ form.password }}
                {% if form.password.errors %}
                <span class="form-error">{{ form.password.errors.0 }}</span>
                {% endif %}
            </div>
            
            <div class="form-group">
                <label for="id_password_confirm" class="form-label">
                    <i class="fas fa-lock"></i>
                    Подтвердите пароль *
                </label>
                {{ form.password_confirm }}
                {% if form.password_confirm.errors %}
                <span class="form-error">{{ form.password_confirm.errors.0 }}</span>
                {% endif %}
            </div>
            
            <div class="form-group captcha-group">
                {{ form.captcha }}
                {% if form.captcha.errors %}
                <span class="form-error">{{ form.captcha.errors.0 }}</span>
                {% endif %}
            </div>
            
            <button type="submit" class="btn btn-primary btn-lg btn-full">
                <i class="fas fa-user-plus"></i>
                Зарегистрироваться
            </button>
        </form>
        
        <div class="auth-footer">
            <p>Уже есть аккаунт? <a href="{% url 'login' %}{% if request.GET.next %}?next={{ request.GET.next }}{% endif %}">Войдите</a></p>
        </div>
    </div>
</div>
{% endblock %}