{% if context_menu_enabled %}
<div
    id="{{ context_menu_id }}"
    data-context-menu
    data-table-id="{{ table_id }}"
    class="fixed z-50 hidden min-w-48 overflow-hidden rounded-lg border border-slate-200 bg-white py-1 shadow-xl"
    role="menu"
    tabindex="-1"
>
    {% for action in context_menu_actions %}
        <button
            type="button"
            role="menuitem"
            data-context-action
            data-action="{{ action.name }}"
            class="flex w-full items-center gap-3 px-3 py-2 text-left text-sm text-slate-700 transition-colors hover:bg-slate-100 focus:bg-slate-100 focus:outline-none"
        >
            {% if action.icon %}
                <span class="flex h-4 w-4 shrink-0 items-center justify-center">
                    {{ action.icon }}
                </span>
            {% endif %}

            <span class="truncate">
                {{ action.label }}
            </span>
        </button>
    {% endfor %}
</div>
{% endif %}