{% extends "base.html" %}

{% block title %}Registrieren{% endblock %}

{% block content %}
<div class="flex justify-center items-center mt-10 px-4">
    <div class="w-full max-w-md">
        <div class="bg-white bg-opacity-80 backdrop-blur-lg rounded-lg shadow-md border border-white border-opacity-30 p-6 md:p-8 transition-all duration-300 transform hover:shadow-lg">
            <h2 class="text-center mb-6 text-gray-800 font-bold text-2xl flex items-center justify-center">
                <i class="fas fa-user-plus mr-2 text-blue-600"></i>
                Registrieren
            </h2>
            
            <form method="POST" action="{{ url_for('register') }}" class="needs-validation space-y-6" novalidate>
                <div class="space-y-2">
                    <label for="username" class="block text-gray-700 font-medium text-sm">Benutzername</label>
                    <div class="relative flex items-center">
                        <span class="absolute left-3 text-blue-600">
                            <i class="fas fa-user"></i>
                        </span>
                        <input type="text" class="pl-10 w-full rounded-md border border-gray-300 py-2 px-4 focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50 transition-all duration-200" 
                               id="username" name="username" placeholder="Dein Benutzername" required>
                    </div>
                    <div class="invalid-feedback text-red-600 text-sm hidden">
                        Bitte gib einen Benutzernamen ein.
                    </div>
                </div>
                
                <div class="space-y-2">
                    <label for="email" class="block text-gray-700 font-medium text-sm">E-Mail</label>
                    <div class="relative flex items-center">
                        <span class="absolute left-3 text-blue-600">
                            <i class="fas fa-envelope"></i>
                        </span>
                        <input type="email" class="pl-10 w-full rounded-md border border-gray-300 py-2 px-4 focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50 transition-all duration-200" 
                               id="email" name="email" placeholder="name@beispiel.de" required>
                    </div>
                    <div class="invalid-feedback text-red-600 text-sm hidden">
                        Bitte gib eine gültige E-Mail-Adresse ein.
                    </div>
                </div>
                
                <div class="space-y-2">
                    <label for="password" class="block text-gray-700 font-medium text-sm">Passwort</label>
                    <div class="relative flex items-center">
                        <span class="absolute left-3 text-blue-600">
                            <i class="fas fa-lock"></i>
                        </span>
                        <input type="password" class="pl-10 w-full rounded-md border border-gray-300 py-2 px-4 focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50 transition-all duration-200" 
                               id="password" name="password" placeholder="Mindestens 8 Zeichen" required>
                        <button class="absolute right-2 text-gray-500 hover:text-gray-700 focus:outline-none" type="button" id="togglePassword">
                            <i class="fas fa-eye"></i>
                        </button>
                    </div>
                    <div class="invalid-feedback text-red-600 text-sm hidden">
                        Bitte gib ein sicheres Passwort ein.
                    </div>
                </div>
                
                <div class="pt-2">
                    <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-md shadow-sm transition-all duration-200 transform hover:scale-[1.02] focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
                        <i class="fas fa-user-plus mr-2"></i> Konto erstellen
                    </button>
                </div>
                
                <div class="text-center mt-4 text-gray-700 text-sm">
                    <p>Bereits registriert? <a href="{{ url_for('login') }}" class="text-blue-600 hover:text-blue-800 font-medium transition-colors duration-200">Anmelden</a></p>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    // Formularvalidierung aktivieren
    (function() {
        'use strict';
        var forms = document.querySelectorAll('.needs-validation');
        Array.prototype.slice.call(forms).forEach(function(form) {
            form.addEventListener('submit', function(event) {
                if (!form.checkValidity()) {
                    event.preventDefault();
                    event.stopPropagation();
                    
                    // Zeige Fehlermeldungen an
                    form.querySelectorAll(':invalid').forEach(function(input) {
                        input.parentNode.nextElementSibling.classList.remove('hidden');
                    });
                }
                form.classList.add('was-validated');
            }, false);
            
            // Verstecke Fehlermeldungen bei Eingabe
            form.querySelectorAll('input').forEach(function(input) {
                input.addEventListener('input', function() {
                    if (this.checkValidity()) {
                        this.parentNode.nextElementSibling.classList.add('hidden');
                    }
                });
            });
        });
        
        // Passwort-Sichtbarkeit umschalten
        const togglePassword = document.querySelector('#togglePassword');
        const password = document.querySelector('#password');
        
        togglePassword.addEventListener('click', function() {
            const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
            password.setAttribute('type', type);
            this.querySelector('i').classList.toggle('fa-eye');
            this.querySelector('i').classList.toggle('fa-eye-slash');
        });
    })();
</script>
{% endblock %}