crm_ecosplay/templates/home/index.html.twig

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

{% block title %}Association E-Cosplay{% endblock %}
{% block description %}Connectez-vous au CRM E-Cosplay pour acceder a votre espace client ou revendeur.{% 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 %}
    {% if app.user %}
        <div class="page-container">
            <h1 class="text-2xl font-bold heading-page mb-8">Tableau de bord</h1>
            <p class="text-sm text-gray-600">Bienvenue, <strong>{{ app.user.fullName }}</strong>.</p>
        </div>
    {% else %}
        <div class="flex items-center justify-center min-h-[calc(100vh-4rem)] px-4">
            <div class="w-full max-w-md">
                <div class="glass-heavy overflow-hidden">
                    <div class="glass-gold p-6 text-center" >
                        <h1 class="text-2xl font-bold text-gray-900">CRM E-Cosplay</h1>
                        <p class="text-sm text-gray-700/70 mt-1">Espace de gestion</p>
                    </div>
                    <div class="p-8">
                        <form method="post" action="{{ path('app_home') }}" class="flex flex-col gap-5">
                            <div>
                                <label for="email" class="block text-xs font-bold uppercase tracking-wider mb-2 text-gray-600">Email</label>
                                <input type="email" id="email" name="_username" required
                                       class="input-glass w-full px-4 py-3 text-sm font-medium"
                                       placeholder="votre@email.fr">
                            </div>

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

                            <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">

                            <button type="submit" class="btn-gold w-full px-6 py-3 text-sm font-bold uppercase tracking-wider text-gray-900">
                                Connexion a mon espace
                            </button>
                            <a href="{{ path('app_forgot_password') }}" class="block text-center mt-1 text-xs text-gray-500 hover:text-indigo-600 transition-colors">Mot de passe oublie ?</a>
                        </form>

                        <div class="mt-6 pt-6 border-t border-gray-200/50">
                            <a href="{{ path('connect_keycloak') }}" class="btn-dark w-full flex items-center justify-center gap-2 px-6 py-3 text-sm font-bold uppercase tracking-wider">
                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/></svg>
                                Connexion E-Cosplay
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    {% endif %}
{% endblock %}