<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin Login — TCCP</title>
    <link rel="icon" href="{{ url_for('static', filename='images/logo.png') }}">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <style>
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body {
            font-family: 'Inter', sans-serif;
            min-height: 100vh; display: flex; align-items: center; justify-content: center;
            background: linear-gradient(135deg, #1a7a7a 0%, #5b2d8e 50%, #2d2d3f 100%);
        }
        .login-card {
            background: #fff; border-radius: 20px; padding: 48px 40px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.15); width: 100%; max-width: 420px;
        }
        .logo-area { text-align: center; margin-bottom: 32px; }
        .logo-area img { height: 56px; margin-bottom: 12px; }
        .logo-area h1 { font-size: 1.3rem; color: #2d2d3f; }
        .logo-area p { font-size: 0.82rem; color: #6b7280; margin-top: 4px; }
        .form-group { margin-bottom: 18px; }
        .form-group label { display: block; font-size: 0.85rem; font-weight: 600; color: #333; margin-bottom: 6px; }
        .form-group input {
            width: 100%; padding: 12px 16px; border: 1px solid #e5e7eb;
            border-radius: 10px; font-size: 0.95rem; font-family: 'Inter', sans-serif;
            transition: all 0.3s;
        }
        .form-group input:focus { outline: none; border-color: #1a7a7a; box-shadow: 0 0 0 3px rgba(26,122,122,0.12); }
        .btn-login {
            width: 100%; padding: 14px; border: none; border-radius: 50px;
            background: linear-gradient(135deg, #1a7a7a, #5b2d8e); color: #fff;
            font-weight: 600; font-size: 0.95rem; cursor: pointer; transition: all 0.3s;
        }
        .btn-login:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(26,122,122,0.3); }
        .flash { padding: 10px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 0.85rem; }
        .flash-danger { background: #fee2e2; color: #991b1b; }
        .flash-success { background: #d1fae5; color: #065f46; }
        .back-link { display: block; text-align: center; margin-top: 20px; color: #6b7280; font-size: 0.85rem; }
        .back-link:hover { color: #1a7a7a; }
    </style>
</head>
<body>
    <div class="login-card">
        <div class="logo-area">
            <img src="{{ url_for('static', filename='images/logo.png') }}" alt="TCCP">
            <h1>Admin Panel</h1>
            <p>TCCP Website Management</p>
        </div>
        {% with messages = get_flashed_messages(with_categories=true) %}
        {% for cat, msg in messages %}
        <div class="flash flash-{{ cat }}">{{ msg }}</div>
        {% endfor %}
        {% endwith %}
        <form method="POST">
            <div class="form-group">
                <label>Username</label>
                <input type="text" name="username" placeholder="Enter username" required autofocus>
            </div>
            <div class="form-group">
                <label>Password</label>
                <input type="password" name="password" placeholder="Enter password" required>
            </div>
            <button type="submit" class="btn-login">Sign In</button>
        </form>
        <a href="{{ url_for('index') }}" class="back-link">← Back to Website</a>
    </div>
</body>
</html>
