{% extends "base.html" %}

{% block title %}Anmelden{% endblock %}

{% block content %}
<div class="flex justify-center items-center min-h-screen px-4 py-12">
    <div class="w-full max-w-md">
        <div class="bg-white bg-opacity-20 backdrop-blur-lg rounded-xl shadow-xl overflow-hidden transition-all duration-300 hover:shadow-2xl">
            <div class="p-6 sm:p-8">
                <h2 class="text-center text-2xl font-bold text-gray-800 mb-6">
                    <i class="fas fa-sign-in-alt mr-2"></i>
                    Anmelden
                </h2>
                
                <form method="POST" action="{{ url_for('login') }}" class="space-y-6">
                    <div class="space-y-2">
                        <label for="username" class="block text-sm font-medium text-gray-700">Benutzername</label>
                        <div class="relative rounded-md shadow-sm">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <i class="fas fa-user text-gray-400"></i>
                            </div>
                            <input type="text" id="username" name="username" required
                                class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
                                placeholder="Benutzername eingeben">
                        </div>
                    </div>
                    
                    <div class="space-y-2">
                        <label for="password" class="block text-sm font-medium text-gray-700">Passwort</label>
                        <div class="relative rounded-md shadow-sm">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <i class="fas fa-lock text-gray-400"></i>
                            </div>
                            <input type="password" id="password" name="password" required
                                class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
                                placeholder="Passwort eingeben">
                        </div>
                    </div>
                    
                    <div>
                        <button type="submit" 
                            class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-200">
                            <i class="fas fa-sign-in-alt mr-2"></i> Anmelden
                        </button>
                    </div>
                    
                    <div class="text-center text-sm text-gray-600">
                        <p>Noch kein Konto? <a href="{{ url_for('register') }}" class="font-medium text-blue-600 hover:text-blue-500 transition-colors">Registrieren</a></p>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}