{% extends 'base.html.twig' %}

{% block title %}E-Mail - Connexion{% endblock %}
{% block description %}Connectez-vous a votre messagerie E-Mail.{% endblock %}

{% block header %}
    <header class="sticky top-0 z-50 glass-heavy" >
        <div class="flex justify-center items-center h-16">
            <a href="{{ path('app_home') }}" aria-label="CRM E-Cosplay - Accueil">
                <img class="h-10 md:h-12 w-auto" src="{{ 'logo.jpg' | imagine_filter('logo') }}" alt="CRM E-Cosplay" loading="eager">
            </a>
        </div>
    </header>
{% endblock %}

{% block body %}
<div class="flex items-center justify-center min-h-[calc(100vh-4rem)] px-4">
    <div class="w-full max-w-sm">

        {% for label, messages in app.flashes %}
            {% for message in messages %}
                <div class="mb-4 p-4 glass border text-sm font-medium {{ label == 'error' ? 'border-red-300 text-red-800' : 'border-green-300 text-green-800' }}">
                    {{ message }}
                </div>
            {% endfor %}
        {% endfor %}

        <div class="glass-heavy overflow-hidden">
            <div class="glass-dark text-white px-6 py-4 text-center" >
                <div class="flex items-center justify-center gap-3">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-[#fabf04]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                    </svg>
                    <span class="text-sm font-bold uppercase tracking-widest">E-Mail</span>
                </div>
                <p class="text-xs text-gray-400 mt-1">Messagerie professionnelle securisee</p>
            </div>

            <div class="p-8">
                <form method="post" action="{{ path('app_webmail_login') }}" class="flex flex-col gap-5">
                    <div>
                        <label for="webmail-email" class="block text-xs font-bold uppercase tracking-wider mb-2 text-gray-600">Adresse email</label>
                        <input type="email" id="webmail-email" name="email" required autocomplete="email"
                               class="input-glass w-full px-4 py-3 text-sm font-medium"
                               placeholder="vous@e-cosplay.fr">
                    </div>

                    <div>
                        <label for="webmail-password" class="block text-xs font-bold uppercase tracking-wider mb-2 text-gray-600">Mot de passe</label>
                        <input type="password" id="webmail-password" name="password" required autocomplete="current-password"
                               class="input-glass w-full px-4 py-3 text-sm font-medium"
                               placeholder="••••••••">
                    </div>

                    <button type="submit" class="btn-gold w-full px-6 py-3 text-sm font-bold uppercase tracking-wider text-gray-900">
                        Connexion a ma messagerie
                    </button>
                </form>
            </div>
        </div>

        <p class="text-center text-xs text-gray-400 mt-6">
            Propulse par <strong>E-Mail</strong> &mdash; Association E-Cosplay
        </p>
    </div>
</div>
{% endblock %}
