{#
 # Organism: AI Lightbox — Lightbox générique pour outils IA image/infographie
 # ============================================================================
 # Usage:
 #   {% embed '_organisms/ai-lightbox/ai-lightbox.html.twig' with {
 #       controller: 'pixia--generator',
 #       primaryRgb: pxColor.primary|hex_to_rgb,
 #   } only %}
 #       {% block meta %}
 #           ...données propres à l'outil...
 #       {% endblock %}
 #       {% block actions %}
 #           ...boutons propres à l'outil...
 #       {% endblock %}
 #   {% endembed %}
 #
 # Paramètres (required):
 #   controller  (string) — identifiant Stimulus, ex: 'pixia--generator'
 #   primaryRgb  (string) — valeurs RGB de la couleur outil, ex: '99 102 241'
 #
 # Variables CSS exposées dans les blocs meta et actions:
 #   --lightbox-primary-rgb  → couleur principale de l'outil en RGB
 # ============================================================================
 #}

<div class="fixed inset-0 z-[100] flex items-center justify-center"
     data-{{ controller }}-target="lightbox"
     style="display:none">

    {# ── Overlay flou ── #}
    <div class="absolute inset-0 bg-black/80 cursor-pointer"
         style="backdrop-filter: blur(10px);"
         data-{{ controller }}-target="lightboxOverlay"
         data-action="click->{{ controller }}#closeLightbox">
    </div>

    {# ── Conteneur principal ── #}
    <div class="relative z-[1] flex flex-col md:flex-row bg-white rounded-2xl overflow-hidden
                w-[min(92vw,920px)] max-h-[96dvh] md:min-h-[580px] md:max-h-[94dvh]"
         style="box-shadow: 0 32px 80px rgba(0,0,0,0.35);"
         data-{{ controller }}-target="lightboxContent">

        {# ── Bouton fermer ── #}
        {# Variante `overlay` : sur mobile la croix se pose au-dessus de l'image,
           où un trait gris se perdrait — elle y passe en blanc détouré. #}
        {% include '_atoms/close-button/close-button.html.twig' with {
            variant: 'overlay',
            class: 'absolute top-3 right-3 z-10',
            attr: { 'data-action': 'click->' ~ controller ~ '#closeLightbox' }
        } only %}

        {# ── Zone image (gauche / haut mobile) ── #}
        <div class="flex-1 bg-[#111] flex items-center justify-center overflow-hidden min-h-[240px]">
            <img data-{{ controller }}-target="lightboxImage"
                 src="" alt=""
                 class="w-full h-full object-contain max-h-[55dvh] md:max-h-[94dvh]" />
        </div>

        {# ── Panneau droite : méta + actions ── #}
        <div class="w-full md:w-[280px] md:flex-shrink-0 md:border-l md:border-gray-100
                    px-5 pt-5 pb-5 flex flex-col overflow-hidden"
             style="--lightbox-primary-rgb: {{ primaryRgb }};">

            {# Slot méta — flex-1 pour que la description s'étire jusqu'aux boutons #}
            <div class="flex-1 min-h-0 flex flex-col">
                {% block meta %}{% endblock %}
            </div>

            {# Slot actions — taille naturelle, toujours en bas #}
            <div class="flex flex-col gap-2 pt-4 flex-shrink-0">
                {% block actions %}{% endblock %}
            </div>

        </div>
    </div>
</div>