{% set menuId = id|default('report-export-menu') %}
<div class="relative" x-data="{ open: false }" @keydown.escape.prevent.stop="open = false; $refs.trigger.focus()">
  <button
    type="button"
    class="btn btn-outline-secondary"
    x-ref="trigger"
    @click="open = !open"
    @keydown.arrow-down.prevent="open = true; $nextTick(() => $refs.menu.querySelector('[role=menuitem]')?.focus())"
    :aria-expanded="open.toString()"
    aria-controls="{{ menuId }}"
    aria-haspopup="menu"
  >
    <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v12m0 0 4-4m-4 4-4-4M5 19h14" /></svg>
    {{ 'button.export'|trans }}
    <svg class="h-4 w-4 transition-transform motion-reduce:transition-none" :class="open ? 'rotate-180' : ''" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9 6 6 6-6" /></svg>
  </button>
  <div
    id="{{ menuId }}"
    x-ref="menu"
    x-show="open"
    x-cloak
    @click.outside="open = false"
    @click="open = false"
    @keydown.tab="open = false"
    @keydown.arrow-down.prevent="const items = [...$el.querySelectorAll('[role=menuitem]')]; items[(items.indexOf(document.activeElement) + 1) % items.length]?.focus()"
    @keydown.arrow-up.prevent="const items = [...$el.querySelectorAll('[role=menuitem]')]; const index = items.indexOf(document.activeElement); items[(index - 1 + items.length) % items.length]?.focus()"
    class="dropdown-panel right-0"
    role="menu"
    aria-label="{{ 'report.export_formats'|trans }}"
  >
    <a role="menuitem" href="{{ path(routeName, exportQuery|merge({export: 'excel'})) }}">Excel</a>
    <a role="menuitem" href="{{ path(routeName, exportQuery|merge({export: 'excel_raw'})) }}">Excel datos</a>
    <a role="menuitem" href="{{ path(routeName, exportQuery|merge({export: 'pdf'})) }}">PDF</a>
    <a role="menuitem" target="_blank" rel="noopener" href="{{ path(routeName, exportQuery|merge({export: 'print'})) }}">{{ 'button.print'|trans }}</a>
  </div>
</div>