{% extends "base.html" %}

{% block title %}Login - AuthKit Admin{% endblock %}

{% block extra_css %}
.login-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 200px);
}

.login-card {
    max-width: 420px;
    width: 100%;
    border-radius: 16px;
    position: relative;
    overflow: hidden;
}

.login-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--primary-glow);
}

.login-header {
    text-align: center;
    margin-bottom: 2rem;
}

.login-header h1 {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    letter-spacing: -0.025em;
}

.login-header p {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.btn-login {
    background: var(--primary-glow);
    border: none;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.25s ease;
    width: 100%;
    margin-top: 1rem;
}

.btn-login:hover {
    box-shadow: 0 4px 20px rgba(168, 85, 247, 0.4);
    transform: translateY(-1px);
}

.error-banner {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #fca5a5;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 0.85rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
{% endblock %}

{% block content %}
<div class="login-wrapper">
    <div class="card login-card">
        <div class="login-header">
            <h1>Welcome Back</h1>
            <p>Sign in to your AuthKit dashboard</p>
        </div>

        {% if error %}
        <div class="error-banner">
            <span>✗</span>
            <span>{{ error }}</span>
        </div>
        {% endif %}

        <form action="{{ admin_path }}/login" method="post">
            <div class="form-group">
                <label for="email">Email Address</label>
                <input type="email" id="email" name="email" required placeholder="admin@example.com" value="{{ email or '' }}">
            </div>
            
            <div class="form-group">
                <label for="password">Password</label>
                <input type="password" id="password" name="password" required placeholder="••••••••">
            </div>

            <button type="submit" class="btn-login">Sign In</button>
        </form>
    </div>
</div>
{% endblock %}