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

{% block title %}Forgot Password Form - Design System - Bubul{% endblock %}

{% block body %}
<div class="min-h-screen bg-gray-50">

    <header class="bg-white border-b border-gray-200 sticky top-0 z-10">
        <div class="max-w-7xl mx-auto px-6 py-4">
            <div class="flex items-center gap-4">
                <a href="{{ path('admin_design_system') }}" class="text-gray-400 hover:text-gray-600 transition-colors">
                    {% include '_atoms/icon/icon.html.twig' with { name: 'chevron-left', size: 'sm', color: 'gray' } %}
                </a>
                <div>
                    <div class="flex items-center gap-2">
                        <span class="px-2 py-0.5 text-xs font-medium bg-purple-100 text-purple-700 rounded">Organisme</span>
                        <span class="text-gray-300">/</span>
                        <h1 class="text-xl font-bold text-gray-900 font-secondary">Forgot Password Form</h1>
                    </div>
                    <p class="text-sm text-gray-500">Formulaire de recuperation de mot de passe</p>
                </div>
            </div>
        </div>
    </header>

    <div class="max-w-7xl mx-auto px-6 py-8">

        {# ===== EXPLICATION ===== #}
        <section class="mb-12 bg-gradient-to-r from-purple-50 to-purple-100/50 rounded-xl border border-purple-200 overflow-hidden">
            <div class="p-6">
                <div class="flex items-start gap-4">
                    <div class="flex-shrink-0 w-12 h-12 bg-purple-500 rounded-xl flex items-center justify-center">
                        {% include '_atoms/icon/icon.html.twig' with { name: 'mail', size: 'lg', color: 'white' } %}
                    </div>
                    <div class="flex-1">
                        <div class="flex items-center gap-2 mb-2">
                            <h2 class="text-lg font-semibold text-gray-900">Formulaire Mot de passe oublie</h2>
                            <span class="px-2 py-0.5 text-xs font-medium bg-green-100 text-green-700 rounded">Public</span>
                        </div>
                        <p class="text-gray-600 mb-4">
                            Le Forgot Password Form est un organisme utilise dans le parcours d'authentification.
                            Il permet a l'utilisateur de saisir son adresse email pour recevoir un lien de reinitialisation
                            de mot de passe. Il gere l'affichage des messages de succes et d'erreur, et inclut
                            des liens de navigation vers la page de connexion et la page d'accueil.
                        </p>
                        <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
                            <div class="bg-white/60 rounded-lg p-3 text-center">
                                <p class="text-2xl font-bold text-purple-600">3</p>
                                <p class="text-xs text-gray-500">Atomes</p>
                            </div>
                            <div class="bg-white/60 rounded-lg p-3 text-center">
                                <p class="text-2xl font-bold text-purple-600">1</p>
                                <p class="text-xs text-gray-500">Input</p>
                            </div>
                            <div class="bg-white/60 rounded-lg p-3 text-center">
                                <p class="text-2xl font-bold text-purple-600">2</p>
                                <p class="text-xs text-gray-500">Links</p>
                            </div>
                            <div class="bg-white/60 rounded-lg p-3 text-center">
                                <p class="text-2xl font-bold text-purple-600">1</p>
                                <p class="text-xs text-gray-500">Button</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        {# ===== COMPOSITION ===== #}
        <section class="mb-12 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                <h2 class="text-lg font-semibold text-gray-900">Composition</h2>
                <p class="text-sm text-gray-500 mt-1">Atomes utilises</p>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div>
                        <h3 class="text-sm font-semibold text-gray-700 mb-3 flex items-center gap-2">
                            <span class="w-2 h-2 bg-green-500 rounded-full"></span>
                            Inputs
                        </h3>
                        <ul class="space-y-2 text-sm text-gray-600">
                            <li class="flex items-center gap-2">
                                <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">input</code>
                                <span class="text-gray-400">email avec icone mail</span>
                            </li>
                        </ul>
                    </div>
                    <div>
                        <h3 class="text-sm font-semibold text-gray-700 mb-3 flex items-center gap-2">
                            <span class="w-2 h-2 bg-blue-500 rounded-full"></span>
                            Links
                        </h3>
                        <ul class="space-y-2 text-sm text-gray-600">
                            <li class="flex items-center gap-2">
                                <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">link</code>
                                <span class="text-gray-400">retour accueil (avec icone arrow-left)</span>
                            </li>
                            <li class="flex items-center gap-2">
                                <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">link</code>
                                <span class="text-gray-400">retour connexion</span>
                            </li>
                        </ul>
                    </div>
                    <div>
                        <h3 class="text-sm font-semibold text-gray-700 mb-3 flex items-center gap-2">
                            <span class="w-2 h-2 bg-purple-500 rounded-full"></span>
                            Actions
                        </h3>
                        <ul class="space-y-2 text-sm text-gray-600">
                            <li class="flex items-center gap-2">
                                <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">button</code>
                                <span class="text-gray-400">submit primary full-width</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>

        {# ===== UTILISATION ===== #}
        <section class="mb-12 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                <h2 class="text-lg font-semibold text-gray-900">Utilisation</h2>
                <p class="text-sm text-gray-500 mt-1">Exemple de code Twig</p>
            </div>
            <div class="p-6">
                <pre class="bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto text-sm"><code>{% verbatim %}{% include '_organisms/forgot-password-form/forgot-password-form.html.twig' with {
    action: path('app_forgot_password'),
    backLinkUrl: path('app_landing'),
    backLinkLabel: 'Retour a l\'accueil',
    loginUrl: path('app_login'),
    error: error|default(null),
    success: success|default(null)
} only %}{% endverbatim %}</code></pre>
            </div>
        </section>

        {# ===== DEMO PAR DEFAUT ===== #}
        <section class="mb-12 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                <h2 class="text-lg font-semibold text-gray-900">Par defaut</h2>
                <p class="text-sm text-gray-500 mt-1">Formulaire avec les valeurs par defaut</p>
            </div>
            <div class="bg-gray-100 p-8 flex justify-center">
                <div class="bg-gray-50 rounded-xl shadow-lg max-w-md w-full">
                    {% include '_organisms/forgot-password-form/forgot-password-form.html.twig' with {
                        action: '#',
                        backLinkUrl: '#',
                        loginUrl: '#'
                    } only %}
                </div>
            </div>
        </section>

        {# ===== DEMO AVEC SUCCES ===== #}
        <section class="mb-12 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                <h2 class="text-lg font-semibold text-gray-900">Avec message de succes</h2>
                <p class="text-sm text-gray-500 mt-1">Parametre : <code class="bg-gray-200 px-1 rounded">success</code></p>
            </div>
            <div class="bg-gray-100 p-8 flex justify-center">
                <div class="bg-gray-50 rounded-xl shadow-lg max-w-md w-full">
                    {% include '_organisms/forgot-password-form/forgot-password-form.html.twig' with {
                        action: '#',
                        backLinkUrl: '#',
                        loginUrl: '#',
                        success: 'Un email de reinitialisation a ete envoye a votre adresse.'
                    } only %}
                </div>
            </div>
        </section>

        {# ===== DEMO AVEC ERREUR ===== #}
        <section class="mb-12 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                <h2 class="text-lg font-semibold text-gray-900">Avec erreur</h2>
                <p class="text-sm text-gray-500 mt-1">Parametre : <code class="bg-gray-200 px-1 rounded">error</code></p>
            </div>
            <div class="bg-gray-100 p-8 flex justify-center">
                <div class="bg-gray-50 rounded-xl shadow-lg max-w-md w-full">
                    {% include '_organisms/forgot-password-form/forgot-password-form.html.twig' with {
                        action: '#',
                        backLinkUrl: '#',
                        loginUrl: '#',
                        error: 'Aucun compte ne correspond a cette adresse email.'
                    } only %}
                </div>
            </div>
        </section>

        {# ===== PARAMETRES ===== #}
        <section class="mb-12 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                <h2 class="text-lg font-semibold text-gray-900">Parametres</h2>
                <p class="text-sm text-gray-500 mt-1">Options de configuration</p>
            </div>
            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead class="bg-gray-50 border-b border-gray-200">
                        <tr>
                            <th class="px-6 py-3 text-left font-semibold text-gray-700">Parametre</th>
                            <th class="px-6 py-3 text-left font-semibold text-gray-700">Type</th>
                            <th class="px-6 py-3 text-left font-semibold text-gray-700">Defaut</th>
                            <th class="px-6 py-3 text-left font-semibold text-gray-700">Description</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100">
                        <tr>
                            <td class="px-6 py-4"><code class="text-xs bg-purple-100 text-purple-700 px-1.5 py-0.5 rounded">action</code></td>
                            <td class="px-6 py-4 text-gray-500">string</td>
                            <td class="px-6 py-4 text-gray-500">'#'</td>
                            <td class="px-6 py-4 text-gray-600">URL d'action du formulaire</td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4"><code class="text-xs bg-purple-100 text-purple-700 px-1.5 py-0.5 rounded">backLinkUrl</code></td>
                            <td class="px-6 py-4 text-gray-500">string</td>
                            <td class="px-6 py-4 text-gray-500">'/'</td>
                            <td class="px-6 py-4 text-gray-600">URL du lien retour</td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4"><code class="text-xs bg-purple-100 text-purple-700 px-1.5 py-0.5 rounded">backLinkLabel</code></td>
                            <td class="px-6 py-4 text-gray-500">string</td>
                            <td class="px-6 py-4 text-gray-500">'Retour a l'accueil'</td>
                            <td class="px-6 py-4 text-gray-600">Texte du lien retour</td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4"><code class="text-xs bg-purple-100 text-purple-700 px-1.5 py-0.5 rounded">loginUrl</code></td>
                            <td class="px-6 py-4 text-gray-500">string</td>
                            <td class="px-6 py-4 text-gray-500">'#'</td>
                            <td class="px-6 py-4 text-gray-600">URL vers la page de connexion</td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4"><code class="text-xs bg-purple-100 text-purple-700 px-1.5 py-0.5 rounded">error</code></td>
                            <td class="px-6 py-4 text-gray-500">string|null</td>
                            <td class="px-6 py-4 text-gray-500">null</td>
                            <td class="px-6 py-4 text-gray-600">Message d'erreur a afficher</td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4"><code class="text-xs bg-purple-100 text-purple-700 px-1.5 py-0.5 rounded">success</code></td>
                            <td class="px-6 py-4 text-gray-500">string|null</td>
                            <td class="px-6 py-4 text-gray-500">null</td>
                            <td class="px-6 py-4 text-gray-600">Message de succes a afficher</td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4"><code class="text-xs bg-purple-100 text-purple-700 px-1.5 py-0.5 rounded">class</code></td>
                            <td class="px-6 py-4 text-gray-500">string</td>
                            <td class="px-6 py-4 text-gray-500">''</td>
                            <td class="px-6 py-4 text-gray-600">Classes Tailwind additionnelles</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </section>

        {# ===== FICHIER SOURCE ===== #}
        <section class="mb-12 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                <h2 class="text-lg font-semibold text-gray-900">Fichier source</h2>
            </div>
            <div class="p-6">
                <code class="text-sm bg-gray-100 px-3 py-2 rounded-lg block">
                    templates/_organisms/forgot-password-form/forgot-password-form.html.twig
                </code>
            </div>
        </section>

    </div>
</div>
{% endblock %}