{% extends 'base.html' %}

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

{% block content %}
<div class="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
    <div class="max-w-md w-full space-y-8">
        <div>
            <div class="flex justify-center">
                <div class="w-16 h-16 bg-gray-900 rounded-2xl flex items-center justify-center">
                    <svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"></path>
                    </svg>
                </div>
            </div>
            <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900">
                Создать аккаунт
            </h2>
            <p class="mt-2 text-center text-sm text-gray-600">
                Начните свой бизнес с помощью ИИ
            </p>
        </div>

        <form class="mt-8 space-y-6" method="post">
            {% csrf_token %}

            <div class="space-y-4">
                <!-- Username -->
                <div>
                    <label for="id_username" class="block text-sm font-medium text-gray-700 mb-2">
                        Имя пользователя
                    </label>
                    {{ form.username }}
                    {% if form.username.errors %}
                        <p class="mt-1 text-sm text-red-600">{{ form.username.errors.0 }}</p>
                    {% endif %}
                </div>

                <!-- Email -->
                <div>
                    <label for="id_email" class="block text-sm font-medium text-gray-700 mb-2">
                        Email
                    </label>
                    {{ form.email }}
                    {% if form.email.errors %}
                        <p class="mt-1 text-sm text-red-600">{{ form.email.errors.0 }}</p>
                    {% endif %}
                </div>

                <!-- Password 1 -->
                <div>
                    <label for="id_password1" class="block text-sm font-medium text-gray-700 mb-2">
                        Пароль
                    </label>
                    {{ form.password1 }}
                    {% if form.password1.errors %}
                        <p class="mt-1 text-sm text-red-600">{{ form.password1.errors.0 }}</p>
                    {% endif %}
                    <p class="mt-1 text-xs text-gray-500">
                        Минимум 8 символов. Не должен быть слишком простым.
                    </p>
                </div>

                <!-- Password 2 -->
                <div>
                    <label for="id_password2" class="block text-sm font-medium text-gray-700 mb-2">
                        Подтвердите пароль
                    </label>
                    {{ form.password2 }}
                    {% if form.password2.errors %}
                        <p class="mt-1 text-sm text-red-600">{{ form.password2.errors.0 }}</p>
                    {% endif %}
                </div>
            </div>

            <div>
                <button type="submit" class="group relative w-full flex justify-center py-3 px-4 border border-transparent text-sm font-medium rounded-lg text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition">
                    <span class="absolute left-0 inset-y-0 flex items-center pl-3">
                        <svg class="h-5 w-5 text-indigo-500 group-hover:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
                        </svg>
                    </span>
                    Зарегистрироваться
                </button>
            </div>

            <div class="text-center">
                <p class="text-sm text-gray-600">
                    Уже есть аккаунт?
                    <a href="{% url 'login' %}" class="font-medium text-indigo-600 hover:text-indigo-500">
                        Войти
                    </a>
                </p>
            </div>

            <div class="border-t border-gray-200 pt-4">
                <p class="text-center text-xs text-gray-500">
                    Регистрируясь, вы соглашаетесь с нашими условиями использования
                </p>
            </div>
        </form>
    </div>
</div>
{% endblock %}