<?php
// views/login.php - Login view for Team Mania Pro
?>
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login - <?= htmlspecialchars($club_name) ?></title>
    <link rel="stylesheet" href="assets/style.css">
    <style>
        :root {
            --primary: <?= $primary_color ?>;
            --secondary: <?= $secondary_color ?>;
        }
        body {
            background-color: var(--bg-app);
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 20px;
        }
        .login-card {
            width: 100%;
            max-width: 420px;
            background-color: #fff;
            border: 1px solid var(--border-color);
            border-radius: var(--radius-lg);
            padding: 40px;
            box-shadow: var(--shadow-lg);
        }
        .login-logo {
            text-align: center;
            margin-bottom: 30px;
        }
        .login-logo img {
            height: 60px;
            width: auto;
            margin-bottom: 12px;
        }
        .login-logo h2 {
            font-size: 24px;
            font-weight: 800;
            color: var(--secondary);
        }
        .login-logo p {
            color: var(--text-muted);
            font-size: 13px;
            margin-top: 4px;
        }
    </style>
</head>
<body>

<div class="login-card">
    <div class="login-logo">
        <?php if (!empty($logo_path) && file_exists(__DIR__ . '/../' . $logo_path)): ?>
            <img src="<?= htmlspecialchars($logo_path) ?>" alt="Vereinslogo">
        <?php endif; ?>
        <h2><?= htmlspecialchars($club_name) ?></h2>
        <p>Geben Sie Ihre Zugangsdaten ein, um fortzufahren.</p>
    </div>

    <?php if (!empty($auth_error)): ?>
        <div class="alert alert-danger" style="margin-bottom: 20px; font-size: 13px; text-align: center;">
            <?= htmlspecialchars($auth_error) ?>
        </div>
    <?php endif; ?>

    <?php if (isset($_SESSION['is_demo']) && $_SESSION['is_demo'] === true): ?>
        <div style="background-color: rgba(2, 132, 199, 0.1); border: 1px solid rgba(2, 132, 199, 0.3); color: #0369a1; padding: 15px; border-radius: var(--radius); margin-bottom: 20px; font-size: 13px;">
            <strong>🎮 Demo-Modus Aktiv</strong><br>
            Wählen Sie eine Test-Rolle zum automatischen Ausfüllen:<br>
            <div style="display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap;">
                <button type="button" class="btn btn-secondary btn-sm" style="padding: 4px 8px; font-size: 11px;" onclick="fillLogin('admin')">Admin</button>
                <button type="button" class="btn btn-secondary btn-sm" style="padding: 4px 8px; font-size: 11px;" onclick="fillLogin('trainer')">Trainer</button>
                <button type="button" class="btn btn-secondary btn-sm" style="padding: 4px 8px; font-size: 11px;" onclick="fillLogin('mitglied')">Mitglied</button>
            </div>
            <p style="font-size: 10px; color: var(--text-muted); margin-top: 5px;">Passwort für alle: <code>demo123</code></p>
        </div>
        <script>
            function fillLogin(role) {
                document.getElementById('username').value = role;
                document.getElementById('password').value = 'demo123';
            }
        </script>
    <?php endif; ?>

    <form method="POST" action="index.php?view=login">
        <div class="form-group">
            <label for="username">Benutzername oder E-Mail</label>
            <input type="text" id="username" name="username" required autocomplete="username" placeholder="z. B. admin">
        </div>
        
        <div class="form-group" style="margin-bottom: 25px;">
            <label for="password">Passwort</label>
            <input type="password" id="password" name="password" required autocomplete="current-password" placeholder="Passwort eingeben">
        </div>

        <button type="submit" class="btn btn-primary" style="width: 100%; padding: 12px;">Einloggen</button>
    </form>

    <div style="text-align: center; margin-top: 30px; font-size: 11px; color: var(--text-muted);">
        Powered by Team Mania PRO - development by sixdev for MORINA SOLUTIONS UG
    </div>
</div>

</body>
</html>
