{% extends "base.html" %}

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

{% block content %}
<div class="row justify-content-center align-items-center" style="min-height: 75vh;">
    <div class="col-md-5 col-lg-4">
        <div class="card glass-card shadow-lg border-0 my-5">
            <div class="card-header bg-transparent text-center border-0 pt-4 pb-2">
                <div class="mb-3 text-primary">
                    <i class="fa-solid fa-user-lock" style="font-size: 3rem;"></i>
                </div>
                <h4 class="fw-bold mb-0">Admin Authentication</h4>
                <p class="text-secondary small">Access TG Auto Reply Pro dashboard</p>
            </div>
            
            <div class="card-body px-4 pb-4">
                <form action="{{ url_for('login') }}" method="POST">
                    <!-- CSRF Token -->
                    <input type="hidden" name="_csrf_token" value="{{ csrf_token }}">
                    
                    <div class="mb-3">
                        <label for="username" class="form-label fw-semibold">Username</label>
                        <div class="input-group">
                            <span class="input-group-text bg-transparent border-end-0 text-secondary"><i class="fa-solid fa-user"></i></span>
                            <input type="text" class="form-control border-start-0" id="username" name="username" placeholder="Username" required autofocus>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="password" class="form-label fw-semibold">Password</label>
                        <div class="input-group">
                            <span class="input-group-text bg-transparent border-end-0 text-secondary"><i class="fa-solid fa-lock"></i></span>
                            <input type="password" class="form-control border-start-0" id="password" name="password" placeholder="••••••••" required>
                        </div>
                    </div>
                    
                    <div class="form-check mb-4">
                        <input class="form-check-input" type="checkbox" id="remember" name="remember">
                        <label class="form-check-label text-secondary small" for="remember">
                            Remember Me
                        </label>
                    </div>
                    
                    <button type="submit" class="btn btn-primary w-100 py-2 fw-semibold shadow-sm">
                        Login <i class="fa-solid fa-right-to-bracket ms-1"></i>
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}