{% extends "base.html" %}
{% block title %}Login{% endblock %}

{% block content %}
<div class="glassmorphism p-6 rounded shadow-lg w-full max-w-md mx-auto">
    <h1 class="text-2xl font-bold mb-4">Anmelden</h1>

    {% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
        {% for category, message in messages %}
          <div class="bg-{{category}}-500 text-white p-2 rounded mb-2">
            {{ message }}
          </div>
        {% endfor %}
    {% endif %}
    {% endwith %}

    <form method="POST" action="{{ url_for('login') }}">
        <div class="mb-4">
            <label for="username" class="block mb-1">Benutzername</label>
            <input type="text" name="username" id="username"
                   class="w-full p-2 border rounded text-gray-800" required>
        </div>
        <div class="mb-4">
            <label for="password" class="block mb-1">Passwort</label>
            <input type="password" name="password" id="password"
                   class="w-full p-2 border rounded text-gray-800" required>
        </div>
        <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded w-full hover:bg-blue-600">
            Login
        </button>
    </form>

    <div class="mt-4 text-center">
        <span class="text-sm text-gray-700 dark:text-gray-300">Noch kein Konto?</span>
        <a href="{{ url_for('register') }}"
           class="inline-block bg-green-500 text-white px-3 py-2 rounded hover:bg-green-600 ml-2 text-sm">
           Registrieren
        </a>
    </div>
</div>
{% endblock content %}