{#
 # ============================================================================
 # MOLECULE: RICH EDITOR
 # ============================================================================
 #
 # Champ de texte riche avec toolbar de mise en forme (gras, italique, souligné,
 # couleur de texte, liste à puces, effacer formatage). Utilise contenteditable
 # + document.execCommand (deux-temps mousedown/click pour éviter le saut de ligne).
 #
 # Peut être utilisé de deux façons :
 #   1. Inclusion Twig directe avec les paramètres ci-dessous.
 #   2. Inclus dans un <template> HTML puis cloné par JS via document.importNode.
 #      Dans ce cas, key/label/value sont laissés vides et définis par JS en post-traitement.
 #
 # ============================================================================
 # PARAMÈTRES
 # ============================================================================
 #
 # | Paramètre | Type   | Défaut | Description                              |
 # |-----------|--------|--------|------------------------------------------|
 # | key       | string | ''     | Identifiant du champ (data-ph-key)       |
 # | label     | string | ''     | Label affiché au-dessus du champ         |
 # | value     | string | ''     | Contenu HTML initial (rendu via |raw)    |
 #
 # ============================================================================
 # ATTRIBUTS DATA CIBLABLES PAR JS (querySelectorAll)
 # ============================================================================
 #
 # data-rich-label          → <label> du champ
 # data-rich-cmd="bold|italic|underline|insertUnorderedList|removeFormat"
 #                          → boutons de format (mousedown+click)
 # data-rich-color-apply    → bouton "A" — applique la couleur courante
 # data-rich-color-trigger  → bouton "▼" — ouvre le color picker
 # data-rich-color-input    → <input type="color">
 # data-rich-color-bar      → barre colorée sous le "A"
 # data-rich-editor         → <div contenteditable>
 #
 # ============================================================================
 # EXEMPLES D'UTILISATION
 # ============================================================================
 #
 # Inclusion directe (Twig) :
 # {% include '_molecules/rich-editor/rich-editor.html.twig' with {
 #     key: 'body:1',
 #     label: 'Corps de texte',
 #     value: '<b>Contenu</b> initial'
 # } %}
 #
 # En template cloné par JS :
 # <template data-my-controller-target="richEditorTpl">
 #     {% include '_molecules/rich-editor/rich-editor.html.twig' %}
 # </template>
 #
 # ============================================================================
 #}

{% set key   = key   ?? '' %}
{% set label = label ?? '' %}
{% set value = value ?? '' %}

{# ────────────────────────────────────────────────────────────────────────────
   Label (toujours présent pour le ciblage JS, masqué si vide)
   ──────────────────────────────────────────────────────────────────────────── #}
<label data-rich-label
       class="block text-[10px] font-bold tracking-[.1em] uppercase mb-[5px] {{ label ? '' : 'hidden' }}"
       style="color:rgba(var(--color-primary-rgb),0.55)">{{ label }}</label>

{# ────────────────────────────────────────────────────────────────────────────
   Wrapper externe — porte uniquement la bordure + l'anneau de focus.
   PAS d'overflow:hidden ici : l'anneau (box-shadow) serait clippé.
   Wrapper interne — overflow:hidden pour clipper les fonds enfants (toolbar
   gris, éditeur blanc). Plus aucun arrondi : le champ est à angles droits, et
   la question du rayon intérieur à accorder au rayon extérieur disparaît avec.
   ──────────────────────────────────────────────────────────────────────────── #}
<div class="re-wrap border-[1.5px] border-black/10 duration-150 focus-within:border-primary">
<div class="overflow-hidden">

    {# ── Toolbar ── #}
    <div class="flex items-center gap-0.5 px-1.5 py-1 bg-gray-50">

        {# Gras #}
        <button type="button" data-rich-cmd="bold" title="Gras"
                class="w-6 h-6 flex items-center justify-center rounded text-[12px] font-bold leading-none text-gray-600 bg-transparent border-0 cursor-pointer hover:bg-gray-200 hover:text-gray-900 transition-colors select-none">B</button>

        {# Italique #}
        <button type="button" data-rich-cmd="italic" title="Italique"
                class="w-6 h-6 flex items-center justify-center rounded text-[12px] italic font-bold leading-none text-gray-600 bg-transparent border-0 cursor-pointer hover:bg-gray-200 hover:text-gray-900 transition-colors select-none">I</button>

        {# Souligné #}
        <button type="button" data-rich-cmd="underline" title="Souligné"
                class="w-6 h-6 flex items-center justify-center rounded text-[12px] font-bold underline leading-none text-gray-600 bg-transparent border-0 cursor-pointer hover:bg-gray-200 hover:text-gray-900 transition-colors select-none">S</button>

        {# Séparateur #}
        <div class="w-px h-4 bg-black/10 mx-0.5 flex-shrink-0"></div>

        {# Couleur — split button : A applique la couleur courante, ▼ ouvre le picker #}
        <div class="flex items-center h-6 rounded hover:bg-gray-200 transition-colors">
            <button type="button" data-rich-color-apply title="Appliquer la couleur"
                    class="h-6 px-1.5 flex items-center justify-center text-[12px] font-bold leading-none text-gray-600 bg-transparent border-0 cursor-pointer select-none">
                <span class="relative">A<span data-rich-color-bar class="absolute -bottom-[3px] left-0 right-0 h-[2.5px] rounded-full bg-gray-900"></span></span>
            </button>
            <div class="w-px h-3.5 bg-black/10 flex-shrink-0"></div>
            <button type="button" data-rich-color-trigger title="Choisir une couleur"
                    class="h-6 px-1 flex items-center justify-center text-gray-400 bg-transparent border-0 cursor-pointer select-none">
                <svg width="7" height="7" viewBox="0 0 24 24" fill="currentColor"><path d="M12 16L4 8h16z"/></svg>
            </button>
            <input type="color" data-rich-color-input class="sr-only" value="#000000" />
        </div>

        {# Séparateur #}
        <div class="w-px h-4 bg-black/10 mx-0.5 flex-shrink-0"></div>

        {# Liste à puces #}
        <button type="button" data-rich-cmd="insertUnorderedList"
                class="w-6 h-6 flex items-center justify-center rounded text-gray-600 bg-transparent border-0 cursor-pointer hover:bg-gray-200 hover:text-gray-900 transition-colors"
                title="Liste à puces">
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                <line x1="9" y1="6" x2="20" y2="6"/>
                <line x1="9" y1="12" x2="20" y2="12"/>
                <line x1="9" y1="18" x2="20" y2="18"/>
                <circle cx="4" cy="6" r="1.5" fill="currentColor" stroke="none"/>
                <circle cx="4" cy="12" r="1.5" fill="currentColor" stroke="none"/>
                <circle cx="4" cy="18" r="1.5" fill="currentColor" stroke="none"/>
            </svg>
        </button>

        {# Effacer le formatage — icône gomme #}
        <button type="button" data-rich-cmd="removeFormat"
                class="w-6 h-6 flex items-center justify-center rounded text-gray-600 bg-transparent border-0 cursor-pointer hover:bg-gray-200 hover:text-gray-900 transition-colors"
                title="Effacer le formatage">
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                <path d="M20 20H7L3 16l13-13 4 4-10.5 10.5"/>
                <line x1="6" y1="16" x2="20" y2="16"/>
            </svg>
        </button>

        {# Séparateur #}
        <div class="w-px h-4 bg-black/10 mx-0.5 flex-shrink-0"></div>

        {# Alignement horizontal : gauche / centre / droite (split button) #}
        <div class="relative flex items-center h-6 rounded hover:bg-gray-200 transition-colors" data-rich-halign-wrap>
            <button type="button" data-rich-halign-apply title="Alignement horizontal"
                    class="h-6 px-1.5 flex items-center justify-center text-gray-600 bg-transparent border-0 cursor-pointer select-none">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="15" y2="12"/><line x1="3" y1="18" x2="18" y2="18"/></svg>
            </button>
            <div class="w-px h-3.5 bg-black/10 flex-shrink-0"></div>
            <button type="button" data-rich-halign-trigger title="Choisir l'alignement horizontal"
                    class="h-6 px-1 flex items-center justify-center text-gray-400 bg-transparent border-0 cursor-pointer select-none">
                <svg width="7" height="7" viewBox="0 0 24 24" fill="currentColor"><path d="M12 16L4 8h16z"/></svg>
            </button>
            <div data-rich-halign-dropdown
                 class="absolute top-full right-0 mt-1 bg-white border border-black/10 rounded-lg shadow-lg z-50 min-w-[110px] overflow-hidden"
                 style="display:none;">
                <button type="button" data-rich-halign-option="left"
                        class="w-full flex items-center gap-2 px-3 py-1.5 text-[11px] text-gray-700 hover:bg-gray-50 border-0 bg-transparent cursor-pointer text-left">
                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="15" y2="12"/><line x1="3" y1="18" x2="18" y2="18"/></svg>
                    Gauche
                </button>
                <button type="button" data-rich-halign-option="center"
                        class="w-full flex items-center gap-2 px-3 py-1.5 text-[11px] text-gray-700 hover:bg-gray-50 border-0 bg-transparent cursor-pointer text-left">
                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="6" y1="12" x2="18" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
                    Centre
                </button>
                <button type="button" data-rich-halign-option="right"
                        class="w-full flex items-center gap-2 px-3 py-1.5 text-[11px] text-gray-700 hover:bg-gray-50 border-0 bg-transparent cursor-pointer text-left">
                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="9" y1="12" x2="21" y2="12"/><line x1="6" y1="18" x2="21" y2="18"/></svg>
                    Droite
                </button>
            </div>
        </div>

        {# Alignement vertical : haut / milieu / bas (split button) #}
        <div class="relative flex items-center h-6 rounded hover:bg-gray-200 transition-colors" data-rich-valign-wrap>
            <button type="button" data-rich-valign-apply title="Alignement vertical"
                    class="h-6 px-1.5 flex items-center justify-center text-gray-600 bg-transparent border-0 cursor-pointer select-none">
                <svg width="12" height="12" viewBox="0 0 24 24"><rect x="3" y="2" width="18" height="20" rx="1" fill="none" stroke="currentColor" stroke-width="1.5" opacity="0.3"/><rect x="5" y="4" width="14" height="2.5" rx="0.5" fill="currentColor"/><rect x="5" y="8" width="10" height="2.5" rx="0.5" fill="currentColor" opacity="0.55"/></svg>
            </button>
            <div class="w-px h-3.5 bg-black/10 flex-shrink-0"></div>
            <button type="button" data-rich-valign-trigger title="Choisir l'alignement vertical"
                    class="h-6 px-1 flex items-center justify-center text-gray-400 bg-transparent border-0 cursor-pointer select-none">
                <svg width="7" height="7" viewBox="0 0 24 24" fill="currentColor"><path d="M12 16L4 8h16z"/></svg>
            </button>
            <div data-rich-valign-dropdown
                 class="absolute top-full right-0 mt-1 bg-white border border-black/10 rounded-lg shadow-lg z-50 min-w-[110px] overflow-hidden"
                 style="display:none;">
                <button type="button" data-rich-valign-option="t"
                        class="w-full flex items-center gap-2 px-3 py-1.5 text-[11px] text-gray-700 hover:bg-gray-50 border-0 bg-transparent cursor-pointer text-left">
                    <svg width="12" height="12" viewBox="0 0 24 24"><rect x="3" y="2" width="18" height="20" rx="1" fill="none" stroke="currentColor" stroke-width="1.5" opacity="0.3"/><rect x="5" y="4" width="14" height="2.5" rx="0.5" fill="currentColor"/><rect x="5" y="8" width="10" height="2.5" rx="0.5" fill="currentColor" opacity="0.55"/></svg>
                    Haut
                </button>
                <button type="button" data-rich-valign-option="ctr"
                        class="w-full flex items-center gap-2 px-3 py-1.5 text-[11px] text-gray-700 hover:bg-gray-50 border-0 bg-transparent cursor-pointer text-left">
                    <svg width="12" height="12" viewBox="0 0 24 24"><rect x="3" y="2" width="18" height="20" rx="1" fill="none" stroke="currentColor" stroke-width="1.5" opacity="0.3"/><rect x="5" y="9" width="14" height="2.5" rx="0.5" fill="currentColor"/><rect x="5" y="13" width="10" height="2.5" rx="0.5" fill="currentColor" opacity="0.55"/></svg>
                    Milieu
                </button>
                <button type="button" data-rich-valign-option="b"
                        class="w-full flex items-center gap-2 px-3 py-1.5 text-[11px] text-gray-700 hover:bg-gray-50 border-0 bg-transparent cursor-pointer text-left">
                    <svg width="12" height="12" viewBox="0 0 24 24"><rect x="3" y="2" width="18" height="20" rx="1" fill="none" stroke="currentColor" stroke-width="1.5" opacity="0.3"/><rect x="5" y="14" width="10" height="2.5" rx="0.5" fill="currentColor" opacity="0.55"/><rect x="5" y="18" width="14" height="2.5" rx="0.5" fill="currentColor"/></svg>
                    Bas
                </button>
            </div>
        </div>

    </div>

    {# Séparateur toolbar / éditeur #}
    <div class="h-px bg-black/[.06]"></div>

    {# ── Zone d'édition ── #}
    <div contenteditable="true"
         {% if key %}data-ph-key="{{ key }}"{% endif %}
         data-rich-editor
         class="w-full px-[10px] py-2 text-[13px] bg-white outline-none font-[inherit] leading-relaxed min-h-[80px] break-words">{{ value|raw }}</div>

</div>{# /wrapper interne #}
</div>{# /wrapper externe #}