{#
 # ============================================================================
 # MOLECULE: ACTION MENU
 # ============================================================================
 #
 # Menu contextuel réutilisable à travers tous les produits.
 # Deux modes :
 #   - Panneau seul (défaut) — positionné par JS (Slidia, Serenia)
 #   - Avec trigger intégré  — popover CSS relatif (Promptly, Castia)
 #
 # ============================================================================
 # ORDRE CANONIQUE DES ENTRÉES  (à respecter dans TOUS les outils)
 # ============================================================================
 #
 #   1. Partager
 #   2. Télécharger / Exporter
 #   3. Ajouter à Moodia
 #   4. Renommer
 #   5. Dupliquer
 #   ── séparateur ──
 #   6. Supprimer                (dangerItems)
 #
 # Une entrée absente est SAUTÉE, jamais déplacée : le rang d'une action ne dépend pas des
 # autres. On passe d'un outil à l'autre plusieurs fois par session, et un menu dont l'ordre
 # change oblige à relire quatre libellés pour retrouver un geste qu'on faisait sans regarder.
 #
 # La logique du classement : ce qui SORT du produit d'abord (partager, exporter, envoyer
 # ailleurs) — c'est ce pour quoi on ouvre ce menu le plus souvent —, puis ce qui gère
 # l'élément (renommer, dupliquer), et enfin ce qui le détruit, isolé par son séparateur.
 #
 # ============================================================================
 # PARAMÈTRES
 # ============================================================================
 #
 # | Paramètre   | Type   | Défaut             | Description                              |
 # |-------------|--------|--------------------|------------------------------------------|
 # | items       | array  | []                 | Actions principales                      |
 # |   └ label   | string | (requis)           | Texte du bouton                          |
 # |   └ icon    | string | null               | Nom de l'icône                           |
 # |   └ href    | string | null               | Si défini, rendu comme <a>              |
 # |   └ attr    | object | {}                 | Attributs HTML (data-action, etc.)       |
 # | dangerItems | array  | []                 | Actions destructives (rouge)             |
 # |   └ ...     | —      | mêmes que items    |                                          |
 # |   └ formAction  | string | null           | Si défini, wrappé dans un <form>         |
 # |   └ formMethod  | string | 'post'         | Méthode HTTP du form                     |
 # |   └ csrfToken   | string | null           | Token CSRF (input hidden _token)         |
 # |   └ formAttr    | object | {}             | Attributs HTML sur le <form>             |
 # | accentHex   | string | '#0C81E4'          | Couleur hex du produit (tool_color_details['xxx'].primary) |
 # | withTrigger | bool   | false              | Ajoute le bouton ⋮ + wrapper popover     |
 # | position    | string | 'right-0 top-full mt-1' | Position du panneau (mode withTrigger)  |
 # | class       | string | ''                 | Classes additionnelles sur le panneau    |
 #
 # ============================================================================
 # EXEMPLES D'UTILISATION
 # ============================================================================
 #
 # Mode panneau seul (Slidia — positionné par JS) :
 # <div class="my-menu" style="display:none; position:fixed;">
 #     {% include '_molecules/action-menu/action-menu.html.twig' with {
 #         items: [{label: 'Renommer', icon: 'edit', attr: {'data-action': 'click->...#rename'}}],
 #         dangerItems: [{label: 'Supprimer', icon: 'trash', attr: {'data-action': 'click->...#delete'}}],
 #         accentHex: tool_color_details['slidia'].primary
 #     } only %}
 # </div>
 #
 # Mode avec trigger intégré (Promptly, Castia — popover par shared--popover) :
 # {% include '_molecules/action-menu/action-menu.html.twig' with {
 #     withTrigger: true,
 #     items: [{label: 'Renommer', icon: 'edit', attr: {'data-action': 'click->...#rename'}}],
 #     dangerItems: [{label: 'Supprimer', icon: 'trash', attr: {'data-action': 'click->...#delete'}}],
 #     accentHex: tool_color_details['promptly'].primary
 # } only %}
 #
 # Item lien :
 # {label: 'Ouvrir', icon: 'arrow-right', href: path('app_...')}
 #
 # Item danger avec form POST (CSRF) :
 # {label: 'Supprimer', icon: 'trash',
 #  formAction: path('app_...delete', {id: entity.id}),
 #  csrfToken: csrf_token('delete-' ~ entity.id),
 #  formAttr: {'data-action': 'submit->...#requestDelete', 'data-podcast-id': entity.id}}
 #
 # ============================================================================
 #}

{% set items = items ?? [] %}
{% set dangerItems = dangerItems ?? [] %}
{% set accentHex = accentHex ?? '#0C81E4' %}
{% set withTrigger = withTrigger ?? false %}
{% set position = position ?? 'right-0 top-full mt-1' %}
{% set class = class ?? '' %}

{% if withTrigger %}<div class="relative" data-controller="shared--popover">
    <button type="button"
            class="w-8 h-8 flex items-center justify-center text-gray-400 rounded-lg hover:bg-gray-100 hover:text-gray-600 transition-colors cursor-pointer"
            data-action="click->shared--popover#toggle">
        {% include '_atoms/icon/icon.html.twig' with {name: 'dots-vertical', size: 'sm', color: 'current'} only %}
    </button>
    <div hidden data-shared--popover-target="panel" class="absolute {{ position }} z-50">
{% endif %}

<div class="bg-white rounded-3xl border border-black/[0.06] shadow-[0_8px_32px_rgba(0,0,0,0.10),0_2px_8px_rgba(0,0,0,0.06)] p-2 w-56 {{ class }}"
     style="--accent-rgb: {{ accentHex|hex_to_rgb }};">

    {% if items|length > 0 %}
    <div class="flex flex-col gap-0.5">
        {% for item in items %}
            {% include '_atoms/button/button.html.twig' with {
                label:   item.label,
                variant: 'ghost',
                size:    'sm',
                icon:    item.icon ?? null,
                href:    item.href ?? null,
                radius:  'xl',
                width:   'full',
                class:   '!justify-start !text-gray-700 !font-normal hover:!translate-y-0 action-menu-item',
                attr:    item.attr ?? {}
            } only %}
        {% endfor %}
    </div>
    {% endif %}

    {% if dangerItems|length > 0 %}
        {% if items|length > 0 %}
        <div class="my-1.5">
            {% include '_atoms/divider/divider.html.twig' with {spacing: 'none', color: 'light'} only %}
        </div>
        {% endif %}
        <div class="flex flex-col gap-0.5">
            {% for item in dangerItems %}
                {% if item.formAction is defined %}
                <form method="{{ item.formMethod ?? 'post' }}" action="{{ item.formAction }}"
                      {% if item.formAttr is defined %}{% for k, v in item.formAttr %}{{ k }}="{{ v }}" {% endfor %}{% endif %}>
                    {% if item.csrfToken is defined %}
                    <input type="hidden" name="_token" value="{{ item.csrfToken }}">
                    {% endif %}
                    {% include '_atoms/button/button.html.twig' with {
                        label:   item.label,
                        variant: 'ghost',
                        size:    'sm',
                        icon:    item.icon ?? null,
                        type:    'submit',
                        radius:  'xl',
                        width:   'full',
                        class:   '!justify-start !text-red-500 !font-normal hover:!bg-red-50 hover:!text-red-600 hover:!translate-y-0',
                        attr:    item.attr ?? {}
                    } only %}
                </form>
                {% else %}
                {% include '_atoms/button/button.html.twig' with {
                    label:   item.label,
                    variant: 'ghost',
                    size:    'sm',
                    icon:    item.icon ?? null,
                    href:    item.href ?? null,
                    radius:  'xl',
                    width:   'full',
                    class:   '!justify-start !text-red-500 !font-normal hover:!bg-red-50 hover:!text-red-600 hover:!translate-y-0',
                    attr:    item.attr ?? {}
                } only %}
                {% endif %}
            {% endfor %}
        </div>
    {% endif %}

</div>

{% if withTrigger %}
    </div>
</div>{% endif %}