{% extends 'base.html' %}
{% block title %}Login - Prompt Manager{% endblock %}

{% block content %}
<div class="d-flex align-items-center justify-content-center position-relative overflow-hidden" style="min-height: 90vh;">
    <div class="glass-panel p-5 animate-up" style="width: 100%; max-width: 400px; border-radius: 28px; box-shadow: 0 20px 60px rgba(0,0,0,0.06); border: 1px solid rgba(255,255,255,0.6);">
        
        <div class="text-center mb-5">
            <div class="mb-4 d-inline-flex align-items-center justify-content-center shadow-sm"
                 style="width: 64px; height: 64px; background: linear-gradient(135deg, #ffffff 0%, #f0f2f5 100%); border-radius: 18px;">
                <i class="bi bi-shield-lock-fill text-primary" style="font-size: 1.8rem; opacity: 0.9;"></i>
            </div>
            <h4 class="fw-bold art-title mb-2">Welcome Back</h4>
            <p class="text-secondary small opacity-75 fw-bold text-uppercase">System Administrator</p>
        </div>

        <form method="POST">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>

            <div class="mb-4 position-relative">
                <span class="position-absolute top-50 start-0 translate-middle-y ms-3 text-secondary opacity-40">
                    <i class="bi bi-person-fill fs-5"></i>
                </span>
                <input type="text" name="username" class="form-control-apple ps-5" placeholder="Username" required autofocus>
            </div>

            <div class="mb-5 position-relative">
                <span class="position-absolute top-50 start-0 translate-middle-y ms-3 text-secondary opacity-40">
                    <i class="bi bi-key-fill fs-5"></i>
                </span>
                <input type="password" name="password" class="form-control-apple ps-5" placeholder="Password" required>
            </div>

            <button type="submit" class="btn-hero-primary w-100 py-3 shadow-sm hover-lift">
                Sign In
            </button>
        </form>

        <div class="text-center mt-5 pt-3 border-top border-secondary border-opacity-10">
            <a href="{{ url_for('public.index') }}" class="text-decoration-none small fw-bold text-secondary d-inline-flex align-items-center gap-2 hover-text-dark">
                <i class="bi bi-arrow-left"></i> Return to Gallery
            </a>
        </div>
    </div>
</div>
{% endblock %}