{# Context menu — right-click triggered menu #}
{# Parameters: items (list of {label: str, url: str|None, icon: str|None, divider: bool|None}) #}
<div x-data="dzContextMenu" class="relative">
  {# The trigger area — wraps caller content #}
  {% block context_trigger %}
  {{ trigger_content | safe if trigger_content else '' }}
  {% endblock %}

  {# Menu #}
  <ul x-show="open"
      x-transition:enter="transition ease-out duration-100"
      x-transition:enter-start="opacity-0 scale-95"
      x-transition:enter-end="opacity-100 scale-100"
      :style="'position:fixed; left:' + x + 'px; top:' + y + 'px'"
      @click.outside="close()"
      role="menu"
      class="menu bg-base-100 border border-base-300 rounded-box shadow-lg z-50 min-w-44 p-1">
    {% for item in items %}
    {% if item.divider %}
    <li class="divider my-1"></li>
    {% else %}
    <li>
      <a {% if item.url %}href="{{ item.url }}"{% endif %}
         @click="close()"
         role="menuitem"
         class="flex items-center gap-2">
        {% if item.icon %}<i data-lucide="{{ item.icon }}" class="w-4 h-4"></i>{% endif %}
        {{ item.label }}
      </a>
    </li>
    {% endif %}
    {% endfor %}
  </ul>
</div>