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

{% block title %}Choice Page - Design System - Bubul{% endblock %}

{% block body %}
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <a href="{{ path('admin_design_system') }}" class="text-sm text-gray-500 hover:text-gray-700">← Design System</a>

    <h1 class="text-3xl font-bold text-gray-900 font-secondary mt-4 mb-2">Choice Page</h1>
    <p class="text-gray-500 mb-8">Gabarit de la page « comment voulez-vous commencer ? », partagé entre les pages de création des outils (aujourd'hui Moodia et Scormia). En-tête centré + grille de <code class="bg-gray-100 px-1 rounded">choice-card</code> + bouton de retour. La grille s'adapte au nombre d'entrées de <code class="bg-gray-100 px-1 rounded">choices</code> : 3 colonnes à partir de 3 choix, 2 colonnes pour 2 choix.</p>

    <h2 class="text-xl font-semibold text-gray-900 mb-4">Trois choix (grille 3 colonnes), avec couleur d'outil</h2>
    <p class="text-sm text-gray-500 mb-4">Démontre aussi des <code class="bg-gray-100 px-1 rounded">choice-card</code> partiellement paramétrées : la première carte est désactivée avec un badge « Pro » et sans <code class="bg-gray-100 px-1 rounded">features</code>, la seconde utilise <code class="bg-gray-100 px-1 rounded">action</code> (Stimulus) au lieu de <code class="bg-gray-100 px-1 rounded">href</code>, la troisième n'a ni <code class="bg-gray-100 px-1 rounded">features</code> ni <code class="bg-gray-100 px-1 rounded">badge</code>.</p>
    <div class="bg-gray-50 rounded-2xl border border-gray-100 p-8 mb-8">
        {% include '_organisms/choice-page/choice-page.html.twig' with {
            icon: 'bubul-slidia',
            color: tool_color_details['slidia'] ?? null,
            title: 'Créez votre présentation',
            subtitle: 'Choisissez votre méthode de démarrage.',
            choices: [
                {
                    title: 'Importer un document',
                    description: 'Carte désactivée avec badge « Pro », sans liste de features.',
                    icon: 'document',
                    color: 'primary',
                    disabled: true,
                    badge: 'Passer en Pro',
                    badgeIcon: 'crown',
                    badgeVariant: 'pro',
                    badgeHref: '#'
                },
                {
                    title: 'Générer avec l\'IA',
                    description: 'Carte pilotée par un data-action Stimulus plutôt qu\'un lien href.',
                    icon: 'magic-stick',
                    color: 'violet',
                    features: [
                        { text: 'Contenu généré de zéro' },
                        { text: 'Approche personnalisée' }
                    ],
                    action: 'click->design-system--demo#noop'
                },
                {
                    title: 'Rédiger manuellement',
                    description: 'Carte minimale : ni features, ni badge, juste un lien.',
                    icon: 'edit',
                    color: 'success',
                    href: '#'
                }
            ],
            backLabel: 'Retour à mes présentations',
            backHref: '#',
            class: 'max-w-6xl mx-auto px-4 sm:px-6 py-8'
        } only %}
    </div>

    <h2 class="text-xl font-semibold text-gray-900 mb-4">Deux choix (grille 2 colonnes), sans couleur d'outil ni sous-titre</h2>
    <p class="text-sm text-gray-500 mb-4"><code class="bg-gray-100 px-1 rounded">color</code> et <code class="bg-gray-100 px-1 rounded">subtitle</code> omis : l'en-tête retombe sur son dégradé primaire par défaut et n'affiche pas de sous-titre. <code class="bg-gray-100 px-1 rounded">backLabel</code> également omis, pour montrer sa valeur par défaut « Retour ».</p>
    <div class="bg-gray-50 rounded-2xl border border-gray-100 p-8 mb-8">
        {% include '_organisms/choice-page/choice-page.html.twig' with {
            icon: 'bubul-scormia',
            title: 'Créez votre module',
            choices: [
                {
                    title: 'Importer un document',
                    description: 'Importez votre PDF, la structure est générée automatiquement.',
                    icon: 'document',
                    color: 'primary',
                    features: [
                        { text: 'Structure automatique' },
                        { text: 'Extraction des images' }
                    ],
                    href: '#'
                },
                {
                    title: 'Rédiger manuellement',
                    description: 'Construisez votre module bloc par bloc, sans IA.',
                    icon: 'edit',
                    color: 'success',
                    features: [
                        { text: 'Contrôle total' },
                        { text: 'Sans tokens' }
                    ],
                    href: '#'
                }
            ],
            backHref: '#',
            class: 'max-w-6xl mx-auto px-4 sm:px-6 py-8'
        } only %}
    </div>

    <h2 class="text-xl font-semibold text-gray-900 mb-4">Paramètres</h2>
    <div class="bg-white rounded-2xl border border-gray-100 overflow-hidden mb-8">
        <table class="w-full text-sm">
            <thead class="bg-gray-50 text-left text-gray-500">
                <tr><th class="px-6 py-3">Paramètre</th><th class="px-6 py-3">Type</th><th class="px-6 py-3">Défaut</th><th class="px-6 py-3">Description</th></tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
                <tr><td class="px-6 py-3 font-mono">icon</td><td class="px-6 py-3">string</td><td class="px-6 py-3">(requis)</td><td class="px-6 py-3">Nom d'atome de l'outil</td></tr>
                <tr><td class="px-6 py-3 font-mono">color</td><td class="px-6 py-3">object</td><td class="px-6 py-3">null</td><td class="px-6 py-3">Entrée de <code class="bg-gray-100 px-1 rounded">tool_color_details</code></td></tr>
                <tr><td class="px-6 py-3 font-mono">title</td><td class="px-6 py-3">string</td><td class="px-6 py-3">(requis)</td><td class="px-6 py-3">Titre de la page</td></tr>
                <tr><td class="px-6 py-3 font-mono">subtitle</td><td class="px-6 py-3">string</td><td class="px-6 py-3">null</td><td class="px-6 py-3">Sous-titre</td></tr>
                <tr><td class="px-6 py-3 font-mono">choices</td><td class="px-6 py-3">array</td><td class="px-6 py-3">(requis)</td><td class="px-6 py-3">Jeux de paramètres de <code class="bg-gray-100 px-1 rounded">choice-card</code></td></tr>
                <tr><td class="px-6 py-3 font-mono">backLabel</td><td class="px-6 py-3">string</td><td class="px-6 py-3">'Retour'</td><td class="px-6 py-3">Libellé du bouton de retour</td></tr>
                <tr><td class="px-6 py-3 font-mono">backHref</td><td class="px-6 py-3">string</td><td class="px-6 py-3">(requis)</td><td class="px-6 py-3">Cible du bouton de retour</td></tr>
                <tr><td class="px-6 py-3 font-mono">class</td><td class="px-6 py-3">string</td><td class="px-6 py-3">'min-h-screen max-w-6xl mx-auto px-4 sm:px-6 py-4 lg:py-8'</td><td class="px-6 py-3">Classes du conteneur</td></tr>
            </tbody>
        </table>
    </div>

    <h2 class="text-xl font-semibold text-gray-900 mb-4">Code</h2>
    <div class="bg-gray-900 rounded-2xl p-6 overflow-x-auto">
        <pre class="text-sm text-gray-100"><code>{% verbatim %}{% include '_organisms/choice-page/choice-page.html.twig' with {
    icon: 'bubul-slidia', color: tool_color_details['slidia'],
    title: 'Créez votre présentation',
    subtitle: 'Choisissez votre méthode.',
    choices: [
        { title: 'Importer un document', description: '…', icon: 'document', color: 'primary',
          features: [{ text: 'Structure automatique' }], href: path('app_slidia_configure', {method: 'pdf'}) }
    ],
    backLabel: 'Retour à mes présentations', backHref: path('app_slidia')
} only %}{% endverbatim %}</code></pre>
    </div>

    <p class="text-sm text-gray-500 mt-4">Fichier : <code class="bg-gray-100 px-1 rounded">templates/_organisms/choice-page/choice-page.html.twig</code></p>
</div>
{% endblock %}