{% extends 'base.html' %}

{% block title %}Connexion - Administration{% endblock %}

{% block styles %}
<style>
    .login-container {
        max-width: 500px;
        margin: 50px auto;
        padding: 30px;
        background-color: var(--card-bg);
        border-radius: 10px;
        box-shadow: var(--shadow);
    }
    
    .login-header {
        text-align: center;
        margin-bottom: 30px;
    }
    
    .login-icon {
        font-size: 60px;
        color: var(--primary-color);
        margin-bottom: 20px;
    }
    
    .login-title {
        font-size: 24px;
        margin-bottom: 10px;
    }
    
    .login-subtitle {
        color: var(--muted-color);
    }
    
    .login-form {
        margin-top: 20px;
    }
    
    .form-floating {
        margin-bottom: 20px;
    }
    
    .login-footer {
        text-align: center;
        margin-top: 20px;
        color: var(--muted-color);
    }
</style>
{% endblock %}

{% block content %}
<div class="login-container">
    <div class="login-header">
        <div class="login-icon">
            <i class="fas fa-user-shield"></i>
        </div>
        <h1 class="login-title">Espace d'administration</h1>
        <p class="login-subtitle">Connectez-vous pour gérer le contenu</p>
    </div>
    
    <form method="POST" action="{{ url_for('admin_bp.login') }}" class="login-form">
        <div class="form-floating mb-3">
            <input type="text" class="form-control" id="username" name="username" placeholder="Nom d'utilisateur" required>
            <label for="username">Nom d'utilisateur</label>
        </div>
        
        <div class="form-floating mb-4">
            <input type="password" class="form-control" id="password" name="password" placeholder="Mot de passe" required>
            <label for="password">Mot de passe</label>
        </div>
        
        <div class="d-grid">
            <button type="submit" class="btn btn-primary btn-lg">
                <i class="fas fa-sign-in-alt me-2"></i> Se connecter
            </button>
        </div>
    </form>
    
    <div class="login-footer">
        <p>Seuls les administrateurs autorisés peuvent accéder à cette section.</p>
        <a href="{{ url_for('main_bp.index') }}">
            <i class="fas fa-arrow-left me-1"></i> Retour à l'accueil
        </a>
    </div>
</div>
{% endblock %}