{% extends "base.html" %}

{% block title %}Sign Up - Vim Docs{% endblock %}

{% block auth_content %}
<div class="flex items-center justify-center min-h-screen bg-gray-900">
    <div class="w-full max-w-md p-8 space-y-8 bg-gray-800 rounded-lg shadow-lg">
        <div class="text-center">
            <h1 class="text-3xl font-bold text-white">
                <i class="mdi mdi-vim text-primary text-4xl mr-2"></i> Vim Docs
            </h1>
            <p class="mt-2 text-gray-400">Create your account</p>
        </div>
        
        <form class="mt-8 space-y-6" method="POST" action="{{ url_for('auth.signup') }}">
            {{ form.hidden_tag() }}
            
            {% with messages = get_flashed_messages(with_categories=true) %}
                {% if messages %}
                    {% for category, message in messages %}
                        <div class="p-4 {{ 'bg-red-600/20 text-red-400' if category == 'error' else 'bg-green-600/20 text-green-400' }} rounded-md">
                            {{ message }}
                        </div>
                    {% endfor %}
                {% endif %}
            {% endwith %}
            
            <div>
                <label for="username" class="block text-sm font-medium text-gray-400">Username</label>
                <div class="mt-1">
                    {{ form.username(class="block w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-md text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary") }}
                </div>
                {% for error in form.username.errors %}
                    <p class="mt-1 text-sm text-red-400">{{ error }}</p>
                {% endfor %}
            </div>
            
            <div>
                <label for="password" class="block text-sm font-medium text-gray-400">Password</label>
                <div class="mt-1">
                    {{ form.password(class="block w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-md text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary", placeholder="Minimum 8 characters") }}
                </div>
                {% for error in form.password.errors %}
                    <p class="mt-1 text-sm text-red-400">{{ error }}</p>
                {% endfor %}
            </div>
            
            <div>
                <label for="password2" class="block text-sm font-medium text-gray-400">Confirm Password</label>
                <div class="mt-1">
                    {{ form.password2(class="block w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-md text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary") }}
                </div>
                {% for error in form.password2.errors %}
                    <p class="mt-1 text-sm text-red-400">{{ error }}</p>
                {% endfor %}
            </div>
            
            <div>
                {{ form.submit(class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-black bg-primary hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary") }}
            </div>
            
            <div class="text-center mt-4">
                <p class="text-sm text-gray-400">
                    Already have an account?
                    <a href="{{ url_for('auth.login') }}" class="font-medium text-primary hover:text-primary-light">
                        Sign in
                    </a>
                </p>
            </div>
        </form>
    </div>
</div>
{% endblock %}