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

{% block title %}Context Banner - 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-[Poppins]">Context Banner</h1>
                    </div>
                    <p class="text-sm text-gray-500">Bandeau contextuel pleine largeur — sélection et affichage du contexte actif</p>
                </div>
            </div>
        </div>
    </header>

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

        {# ===== PRÉSENTATION ===== #}
        <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-cohorts rounded-xl flex items-center justify-center shadow-cohorts">
                        {% include '_atoms/icon/icon.html.twig' with { name: 'building', 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">Bandeau de contexte</h2>
                            <span class="px-2 py-0.5 text-xs font-medium bg-blue-100 text-blue-700 rounded">SAM · Réutilisable</span>
                        </div>
                        <p class="text-gray-600 mb-4">
                            Le <code class="bg-white/70 px-1.5 py-0.5 rounded text-sm font-mono">context-banner</code> est un bandeau pleine largeur
                            collé en haut de chaque section. Il affiche le contexte actif (ex : entreprise sélectionnée) et
                            propose un sélecteur pour en changer. Conçu pour s'échapper du padding de la <code class="bg-white/70 px-1.5 py-0.5 rounded text-sm font-mono">&lt;main&gt;</code>
                            via des marges négatives <code class="bg-white/70 px-1.5 py-0.5 rounded text-sm font-mono">-mx-6 lg:-mx-8</code>.
                        </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">1</p>
                                <p class="text-xs text-gray-500">Atome</p>
                            </div>
                            <div class="bg-white/60 rounded-lg p-3 text-center">
                                <p class="text-2xl font-bold text-purple-600">4</p>
                                <p class="text-xs text-gray-500">Variantes couleur</p>
                            </div>
                            <div class="bg-white/60 rounded-lg p-3 text-center">
                                <p class="text-2xl font-bold text-purple-600">7</p>
                                <p class="text-xs text-gray-500">Pages SAM</p>
                            </div>
                            <div class="bg-white/60 rounded-lg p-3 text-center">
                                <p class="text-2xl font-bold text-purple-600">sticky</p>
                                <p class="text-xs text-gray-500">Position</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        {# ===== PARAMÈTRES ===== #}
        <section class="mb-12">
            <h2 class="text-lg font-semibold text-gray-900 mb-4">Paramètres</h2>
            <div class="bg-white rounded-xl border border-gray-200 overflow-hidden">
                <table class="w-full text-sm">
                    <thead class="bg-gray-50 border-b border-gray-200">
                        <tr>
                            <th class="text-left px-4 py-3 font-medium text-gray-700">Paramètre</th>
                            <th class="text-left px-4 py-3 font-medium text-gray-700">Type</th>
                            <th class="text-left px-4 py-3 font-medium text-gray-700">Défaut</th>
                            <th class="text-left px-4 py-3 font-medium text-gray-700">Description</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100">
                        <tr><td class="px-4 py-3 font-mono text-purple-600">title</td><td class="px-4 py-3 text-gray-500">string</td><td class="px-4 py-3 text-gray-400 font-mono">requis</td><td class="px-4 py-3 text-gray-600">Titre du contexte (ex: nom d'entreprise)</td></tr>
                        <tr><td class="px-4 py-3 font-mono text-purple-600">subtitle</td><td class="px-4 py-3 text-gray-500">string</td><td class="px-4 py-3 text-gray-400 font-mono">null</td><td class="px-4 py-3 text-gray-600">Sous-titre (HTML autorisé via |raw)</td></tr>
                        <tr><td class="px-4 py-3 font-mono text-purple-600">icon</td><td class="px-4 py-3 text-gray-500">string</td><td class="px-4 py-3 text-gray-400 font-mono">'building'</td><td class="px-4 py-3 text-gray-600">Nom de l'icône Solar (atom icon)</td></tr>
                        <tr><td class="px-4 py-3 font-mono text-purple-600">color</td><td class="px-4 py-3 text-gray-500">string</td><td class="px-4 py-3 text-gray-400 font-mono">'primary'</td><td class="px-4 py-3 text-gray-600">Variante: <code>primary</code>, <code>cohorts</code>, <code>success</code>, <code>warning</code></td></tr>
                        <tr><td class="px-4 py-3 font-mono text-purple-600">selector</td><td class="px-4 py-3 text-gray-500">object</td><td class="px-4 py-3 text-gray-400 font-mono">null</td><td class="px-4 py-3 text-gray-600">Config sélecteur: <code>{items, selected, controller, baseUrl}</code></td></tr>
                        <tr><td class="px-4 py-3 font-mono text-purple-600">actions</td><td class="px-4 py-3 text-gray-500">array</td><td class="px-4 py-3 text-gray-400 font-mono">null</td><td class="px-4 py-3 text-gray-600">Boutons d'action: <code>[{label, href, icon}]</code></td></tr>
                        <tr><td class="px-4 py-3 font-mono text-purple-600">sticky</td><td class="px-4 py-3 text-gray-500">bool</td><td class="px-4 py-3 text-gray-400 font-mono">true</td><td class="px-4 py-3 text-gray-600">Fixe le bandeau en haut au scroll</td></tr>
                        <tr><td class="px-4 py-3 font-mono text-purple-600">class</td><td class="px-4 py-3 text-gray-500">string</td><td class="px-4 py-3 text-gray-400 font-mono">''</td><td class="px-4 py-3 text-gray-600">Classes Tailwind additionnelles</td></tr>
                    </tbody>
                </table>
            </div>
        </section>

        {# ===== THÈME CLAIR (défaut) ===== #}
        <section class="mb-12">
            <h2 class="text-lg font-semibold text-gray-900 mb-2">Thème clair <code class="text-sm font-mono text-purple-600">theme: 'light'</code> (défaut)</h2>
            <p class="text-sm text-gray-500 mb-4">Fond blanc avec trait de couleur en haut et icône tintée. Recommandé pour s'intégrer dans un layout existant.</p>
            <div class="space-y-4">

                {# cohorts light (SAM) #}
                <div>
                    <p class="text-xs font-mono text-gray-400 mb-2">color: 'cohorts', theme: 'light' — SAM (utilisé en production)</p>
                    <div class="rounded-xl overflow-hidden border border-gray-200">
                        {% include '_organisms/context-banner/context-banner.html.twig' with {
                            title: 'Acme Corporation',
                            subtitle: '24 apprenants · 8 cours · 3 cohortes',
                            icon: 'building',
                            color: 'cohorts',
                            theme: 'light',
                            sticky: false
                        } %}
                    </div>
                </div>

                {# primary light #}
                <div>
                    <p class="text-xs font-mono text-gray-400 mb-2">color: 'primary', theme: 'light'</p>
                    <div class="rounded-xl overflow-hidden border border-gray-200">
                        {% include '_organisms/context-banner/context-banner.html.twig' with {
                            title: 'Formation React Avancé',
                            subtitle: 'Moodia · 6 sections · 24 activités',
                            icon: 'book',
                            color: 'primary',
                            theme: 'light',
                            sticky: false
                        } %}
                    </div>
                </div>

                {# success light #}
                <div>
                    <p class="text-xs font-mono text-gray-400 mb-2">color: 'success', theme: 'light'</p>
                    <div class="rounded-xl overflow-hidden border border-gray-200">
                        {% include '_organisms/context-banner/context-banner.html.twig' with {
                            title: 'Contrat actif',
                            subtitle: 'Valide jusqu\'au 31/12/2025',
                            icon: 'check-circle',
                            color: 'success',
                            theme: 'light',
                            sticky: false
                        } %}
                    </div>
                </div>

            </div>
        </section>

        {# ===== THÈME SOMBRE ===== #}
        <section class="mb-12">
            <h2 class="text-lg font-semibold text-gray-900 mb-2">Thème sombre <code class="text-sm font-mono text-purple-600">theme: 'dark'</code></h2>
            <p class="text-sm text-gray-500 mb-4">Fond plein coloré avec texte blanc. Pour les bandeaux à fort impact visuel.</p>
            <div class="space-y-4">

                {# cohorts dark #}
                <div>
                    <p class="text-xs font-mono text-gray-400 mb-2">color: 'cohorts', theme: 'dark'</p>
                    <div class="rounded-xl overflow-hidden border border-gray-200">
                        {% include '_organisms/context-banner/context-banner.html.twig' with {
                            title: 'Acme Corporation',
                            subtitle: '24 apprenants · 8 cours · 3 cohortes',
                            icon: 'building',
                            color: 'cohorts',
                            theme: 'dark',
                            sticky: false
                        } %}
                    </div>
                </div>

                {# primary dark #}
                <div>
                    <p class="text-xs font-mono text-gray-400 mb-2">color: 'primary', theme: 'dark'</p>
                    <div class="rounded-xl overflow-hidden border border-gray-200">
                        {% include '_organisms/context-banner/context-banner.html.twig' with {
                            title: 'Formation React Avancé',
                            subtitle: 'Moodia · 6 sections · 24 activités',
                            icon: 'book',
                            color: 'primary',
                            theme: 'dark',
                            sticky: false
                        } %}
                    </div>
                </div>

                {# warning dark #}
                <div>
                    <p class="text-xs font-mono text-gray-400 mb-2">color: 'warning', theme: 'dark'</p>
                    <div class="rounded-xl overflow-hidden border border-gray-200">
                        {% include '_organisms/context-banner/context-banner.html.twig' with {
                            title: 'Configuration incomplète',
                            subtitle: 'Moodle n\'est pas encore configuré',
                            icon: 'alert',
                            theme: 'dark',
                            color: 'warning',
                            sticky: false
                        } %}
                    </div>
                </div>

            </div>
        </section>

        {# ===== AVEC SÉLECTEUR ===== #}
        <section class="mb-12">
            <h2 class="text-lg font-semibold text-gray-900 mb-4">Avec sélecteur de contexte</h2>
            <p class="text-sm text-gray-500 mb-4">Affiché uniquement si <code class="bg-gray-100 px-1.5 py-0.5 rounded font-mono">selector.items</code> contient plus d'un élément.</p>
            <div class="rounded-xl overflow-hidden border border-gray-200">
                {% include '_organisms/context-banner/context-banner.html.twig' with {
                    title: 'Acme Corporation',
                    subtitle: '24 apprenants · 8 cours',
                    icon: 'building',
                    color: 'cohorts',
                    theme: 'light',
                    sticky: false,
                    selector: {
                        items: [
                            { label: 'Acme Corporation', value: 'uuid-1' },
                            { label: 'Globex Industries', value: 'uuid-2' },
                            { label: 'Initech', value: 'uuid-3' }
                        ],
                        selected: 'uuid-1',
                        controller: 'sam--company-selector',
                        baseUrl: '/sam'
                    }
                } %}
            </div>
        </section>

        {# ===== UTILISATION DANS SAM ===== #}
        <section class="mb-12">
            <h2 class="text-lg font-semibold text-gray-900 mb-4">Utilisation dans SAM</h2>
            <div class="bg-gray-900 rounded-xl p-6 overflow-x-auto">
                <pre class="text-green-400 text-sm font-mono whitespace-pre">{%- verbatim %}
{# Dans sam/layout.html.twig — hérité automatiquement par toutes les pages SAM #}

{% include '_organisms/context-banner/context-banner.html.twig' with {
    title: company ? company.name : 'Toutes les entreprises',
    subtitle: company
        ? stats.users ~ ' apprenants · ' ~ stats.courses ~ ' cours'
        : 'Vue d\'ensemble — toutes entreprises',
    icon: 'building',
    color: 'cohorts',
    selector: (isAdmin and companies|length > 1) ? {
        items: companies|map(c => { label: c.name, value: c.uuid }),
        selected: company ? company.uuid : null,
        controller: 'sam--company-selector',
        baseUrl: currentPageUrl
    } : null
} %}
{% endverbatim -%}</pre>
            </div>
        </section>

        {# ===== NOTE TECHNIQUE ===== #}
        <section class="mb-12">
            <h2 class="text-lg font-semibold text-gray-900 mb-4">Note technique — Pleine largeur</h2>
            <div class="bg-amber-50 border border-amber-200 rounded-xl p-5">
                <div class="flex items-start gap-3">
                    {% include '_atoms/icon/icon.html.twig' with { name: 'alert', size: 'md', color: 'warning' } %}
                    <div class="text-sm text-amber-800">
                        <p class="font-semibold mb-1">Marges négatives requises</p>
                        <p>Le context-banner s'échappe automatiquement du padding <code class="bg-amber-100 px-1.5 py-0.5 rounded font-mono">px-6 lg:px-8 py-8</code>
                        de la <code class="bg-amber-100 px-1.5 py-0.5 rounded font-mono">&lt;main&gt;</code> grâce aux classes internes
                        <code class="bg-amber-100 px-1.5 py-0.5 rounded font-mono">-mx-6 lg:-mx-8 -mt-8 lg:-mt-12 mb-8</code>.
                        Il doit être placé en <strong>premier enfant</strong> du block body.</p>
                    </div>
                </div>
            </div>
        </section>

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