{% extends "base.html" %}

{% block title %}Anmeldung - Media Manager{% endblock %}

{% block head %}
<link rel="stylesheet" href="/static/login.css">
{% endblock %}

{% block content %}
<div class="login-container">
    <div class="login-card">
        <div class="login-header">
            <h2><i class="bi bi-shield-lock"></i> Anmeldung</h2>
            <p class="text-muted">Bitte melden Sie sich mit Ihren Zugangsdaten an</p>
        </div>

        <form id="loginForm">
            <div class="mb-3">
                <label for="username" class="form-label">Benutzername</label>
                <div class="input-group">
                    <span class="input-group-text"><i class="bi bi-person"></i></span>
                    <input type="text" class="form-control" id="username" name="username" required>
                </div>
            </div>

            <div class="mb-3">
                <label for="password" class="form-label">Passwort</label>
                <div class="input-group">
                    <span class="input-group-text"><i class="bi bi-lock"></i></span>
                    <input type="password" class="form-control" id="password" name="password" required>
                </div>
            </div>

            <div id="error-message" class="alert alert-danger d-none"></div>

            <button type="submit" class="btn btn-primary w-100" id="loginBtn">
                <span class="spinner-border spinner-border-sm d-none me-2" id="loginSpinner"></span>
                Anmelden
            </button>
        </form>
    </div>
</div>

<script>
document.getElementById('loginForm').addEventListener('submit', async function(e) {
    e.preventDefault();

    const loginBtn = document.getElementById('loginBtn');
    const loginSpinner = document.getElementById('loginSpinner');
    const errorDiv = document.getElementById('error-message');

    // UI während Login aktualisieren
    loginBtn.disabled = true;
    loginSpinner.classList.remove('d-none');
    errorDiv.classList.add('d-none');

    const formData = {
        username: document.getElementById('username').value,
        password: document.getElementById('password').value
    };

    try {
        const response = await fetch('/api/auth/jellyfin', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(formData)
        });

        const data = await response.json();

        if (data.success) {
            window.location.href = data.redirect || '/';
        } else {
            throw new Error(data.error || 'Anmeldung fehlgeschlagen');
        }
    } catch (error) {
        errorDiv.textContent = error.message;
        errorDiv.classList.remove('d-none');
    } finally {
        loginBtn.disabled = false;
        loginSpinner.classList.add('d-none');
    }
});
</script>
{% endblock %}