<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="csrf-token" content="{{ csrf_token }}">
        <title>Connexion — {{ site_title | default(value="Administration") }}</title>
        <link rel="icon" type="image/png" href='{% media "favicon/favicon.ico" %}'>

        {% block extra_css %}
            <link rel="stylesheet" href="{{ "css/admin/variables.css" | runique_static }}">
            <link rel="stylesheet" href="{{ "css/admin/layout.css" | runique_static }}">
            <link rel="stylesheet" href="{{ "css/admin/components.css" | runique_static }}">
            <link rel="stylesheet" href="{{ "css/admin/buttons.css" | runique_static }}">
            <link rel="stylesheet" href="{{ "css/admin/forms.css" | runique_static }}">
            <link rel="stylesheet" href="{{ "css/admin/responsive.css" | runique_static }}">
            <link rel="stylesheet" href="{{ "css/admin/login.css" | runique_static }}">
        {% endblock %}
    </head>
    
    <body>
        <div class="login-wrapper">
            <div class="login-card">

                <div class="login-header">
                    <div class="login-logo">R</div>
                    <h1 class="login-title">{{ site_title | default(value="Runique Admin") }}</h1>
                    <p class="login-subtitle">Connectez-vous pour accéder au panneau d'administration</p>
                </div>

                {% if error %}
                <div class="alert alert-danger" style="margin-bottom: 1rem;">
                    {{ error }}
                </div>
                {% endif %}

                <form class="login-form" method="POST" action="/admin/login">
                    {% csrf %}

                    <div class="form-group">
                        <label class="form-label required" for="username">Nom d'utilisateur</label>
                        <input
                            class="form-input {% if errors.username %}error{% endif %}"
                            type="text"
                            id="username"
                            name="username"
                            value="{{ form.username | default(value='') }}"
                            autocomplete="username"
                            autofocus
                        >
                        {% if errors.username %}
                        <span class="form-error">{{ errors.username }}</span>
                        {% endif %}
                    </div>

                    <div class="form-group">
                        <label class="form-label required" for="password">Mot de passe</label>
                        <input
                            class="form-input {% if errors.password %}error{% endif %}"
                            type="password"
                            id="password"
                            name="password"
                            autocomplete="current-password"
                        >
                        {% if errors.password %}
                        <span class="form-error">{{ errors.password }}</span>
                        {% endif %}
                    </div>

                    <button type="submit" class="btn btn-primary login-btn">
                        Se connecter
                    </button>

                </form>

            </div>
        </div>
    </body>
</html>
