{% 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>
                <div class="password-input-wrapper">
                    {{ form.password }}
                    <button type="button" class="password-toggle" onclick="togglePasswordVisibility('id_password', this)" aria-label="Показать пароль">
                        <i class="far fa-eye"></i>
                    </button>
                </div>
                {% 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>
                <div class="password-input-wrapper">
                    {{ form.password_confirm }}
                    <button type="button" class="password-toggle" onclick="togglePasswordVisibility('id_password_confirm', this)" aria-label="Показать пароль">
                        <i class="far fa-eye"></i>
                    </button>
                </div>
                {% if form.password_confirm.errors %}
                <span class="form-error">{{ form.password_confirm.errors.0 }}</span>
                {% endif %}
            </div>
            
            <div class="form-group captcha-group">
                <div class="smart-captcha-wrapper" style="height: 100px;">
                    <div id="register-captcha-container"
                         class="smart-captcha"
                         data-sitekey="{{ smartcaptcha_client_key }}"
                         data-hl="ru"></div>
                    {{ form.captcha }}
                </div>
                {% if form.captcha.errors %}
                <span class="form-error">{{ form.captcha.errors.0 }}</span>
                {% endif %}
            </div>

            <script>
            document.addEventListener('DOMContentLoaded', function() {
                function initRegisterCaptcha() {
                    if (window.smartCaptcha) {
                        window.smartCaptcha.render('register-captcha-container', {
                            sitekey: '{{ smartcaptcha_client_key }}',
                            hl: 'ru',
                            callback: function(token) {
                                document.getElementById('smart-captcha-token').value = token;
                            }
                        });
                    } else {
                        setTimeout(initRegisterCaptcha, 100);
                    }
                }
                initRegisterCaptcha();
            });
            </script>
            
            <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 %}