{# @description DaisyUI dropdown: a trigger and a panel. #}
{# @prop valign:select['top','bottom','left','right'] | default:"bottom" | description:"Preferred side of the trigger the panel opens on." #}
{# @prop halign:select['start','center','end'] | default:"start" | description:"Preferred alignment of the panel along that side." #}
{# @prop full:boolean | description:"Stretch the panel to the trigger's width instead of sizing to its content." #}
{# @prop hover:boolean | description:"Open on hover instead of click." #}
{# @prop class:text | description:"Extra classes on the .dropdown wrapper." #}
{# @prop content_class:text | description:"Extra classes on the .dropdown-content panel." #}
{# @slot:button Options — Trigger; falls back to a c-button built from undeclared attributes when omitted. #}
{# @slot Menu markup — The panel's content. #}
{% comment %}
  assets/js/dropdown.js upgrades the marked wrapper at runtime, positioning
  the panel against available space; the daisyUI classes above are the
  fallback for when that script never runs.
{% endcomment %}
{% load mvp %}
<c-vars valign="bottom" halign="start" full hover class content_class />
<div class="dropdown {% variation valign "dropdown" "top,bottom,left,right" %} {% variation halign "dropdown" "start,center,end" %}{% if hover %} dropdown-hover{% endif %} {{ class }}"
     data-mvp-dropdown
     data-mvp-placement="{{ valign }}{% if halign != "center" %}-{{ halign }}{% endif %}"
     {% if button %}{{ attrs }}{% endif %}>
  {% if button %}
    {{ button }}
  {% else %}
    <c-button tabindex="0" role="button" :attrs="attrs" />
  {% endif %}
  <div tabindex="0"
       class="dropdown-content bg-base-100 rounded-box z-50 min-w-52{% if full %} w-full{% endif %} shadow-lg border border-base-300 {{ content_class }}">{{ slot }}</div>
</div>