{% extends "layout.html" %}
{% block title %}Criar Conta - QRPass{% endblock %}
{% block content %}
<div class="flex justify-center items-center py-12">
    <div class="w-full max-w-md">
        <form method="POST" action="{{ url_for('auth.signup', next=request.args.get('next')) }}" class="glass-card rounded-2xl shadow-2xl p-8 space-y-4">
            <h2 class="text-center text-3xl font-bold text-gray-900 dark:text-white">Criar Conta</h2>
            <div>
                <label for="username" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Nome de Usuário</label>
                <input type="text" name="username" id="username" required autocomplete="username"
                       class="mt-1 block w-full px-4 py-3 glass-effect rounded-xl focus:ring-2 focus:ring-primary focus:border-transparent transition-all duration-200 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400">
            </div>

            <div>
                <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email</label>
                <input type="email" name="email" id="email" required autocomplete="email"
                       class="mt-1 block w-full px-4 py-3 glass-effect rounded-xl focus:ring-2 focus:ring-primary focus:border-transparent transition-all duration-200 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400">
            </div>

            <div>
                <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Senha</label>
                <input type="password" name="password" id="password" required autocomplete="new-password"
                       class="mt-1 block w-full px-4 py-3 glass-effect rounded-xl focus:ring-2 focus:ring-primary focus:border-transparent transition-all duration-200 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400">
            </div>

            <div class="pt-4">
                <button type="submit"
                        class="w-full flex justify-center py-3 px-4 border border-transparent rounded-xl shadow-sm text-lg font-bold text-white bg-gradient-to-r from-success to-green-600 hover:shadow-lg transition-all duration-200 hover-scale">
                    Registrar
                </button>
            </div>
            <p class="text-center text-sm text-gray-600 dark:text-gray-400">
                Já tem uma conta? <a href="{{ url_for('auth.login', next=request.args.get('next')) }}" class="font-medium text-primary hover:text-secondary">Faça login</a>
            </p>
        </form>
    </div>
</div>
{% endblock %}