{% load list_tags %}
{% comment %}
Export dropdown — offers XLSX (Excel) + CSV downloads of the current list
URL, preserving filters + sort. Pair with views that use
`apps.core.lists.CsvExportMixin`.

Args:
  disabled       (bool|None) — render greyed-out non-button when queryset empty
  label_override (str|None)  — replace "Export" with custom label
  size           (str|None)  — "lg" matches .btn-secondary sizing for use in a
                                page-header action row; default is the compact
                                size meant for list_toolbar.html's search row.
{% endcomment %}
{% if disabled %}
  <span class="inline-flex items-center gap-1.5 rounded-lg border border-ruforum-border bg-ruforum-surface text-ruforum-text-muted opacity-60 {% if size == 'lg' %}px-4 py-2.5 text-sm font-medium{% else %}px-3 py-1.5 text-xs font-medium{% endif %}"
        aria-disabled="true"
        title="Nothing to export">
    <svg class="h-3.5 w-3.5" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.75" aria-hidden="true">
      <path stroke-linecap="round" stroke-linejoin="round" d="M10 3v10m0 0l-3.5-3.5M10 13l3.5-3.5M4 17h12"/>
    </svg>
    {{ label_override|default:"Export" }}
  </span>
{% else %}
  <div class="relative" x-data="{ open: false }" @click.outside="open = false" @keydown.escape.window="open = false">
    <button type="button"
            @click="open = !open"
            :aria-expanded="open"
            class="inline-flex items-center gap-1.5 rounded-lg border border-ruforum-border bg-white text-ruforum-text transition-colors hover:bg-ruforum-warm-hover hover:border-ruforum-border-strong focus:outline-none focus:ring-1 focus:ring-ruforum-primary {% if size == 'lg' %}px-4 py-2.5 text-sm font-medium{% else %}px-3 py-1.5 text-xs font-medium{% endif %}">
      <svg class="h-3.5 w-3.5" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.75" aria-hidden="true">
        <path stroke-linecap="round" stroke-linejoin="round" d="M10 3v10m0 0l-3.5-3.5M10 13l3.5-3.5M4 17h12"/>
      </svg>
      {{ label_override|default:"Export" }}
      <svg class="h-3 w-3 text-ruforum-text-muted transition-transform" :class="open && 'rotate-180'" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
        <path stroke-linecap="round" stroke-linejoin="round" d="M5 8l5 5 5-5"/>
      </svg>
    </button>
    <div x-show="open"
         x-cloak
         x-transition:enter="transition ease-out duration-100"
         x-transition:enter-start="opacity-0 -translate-y-1"
         x-transition:enter-end="opacity-100 translate-y-0"
         class="absolute right-0 top-full z-30 mt-1 w-64 rounded-lg border border-ruforum-border bg-white shadow-dropdown"
         role="menu">
      <a href="{% export_url 'xlsx' %}"
         data-download
         class="flex items-center gap-2 rounded-t-lg px-3 py-2 text-xs text-ruforum-text transition-colors hover:bg-ruforum-warm-hover"
         role="menuitem"
         @click="open = false">
        <svg class="h-4 w-4 text-emerald-700" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path d="M4 3h12a1 1 0 011 1v12a1 1 0 01-1 1H4a1 1 0 01-1-1V4a1 1 0 011-1zm2.5 4l2 3-2 3h1.5l1.25-1.875L10.5 13H12l-2-3 2-3h-1.5L9.25 8.875 8 7H6.5z"/>
        </svg>
        <div class="flex-1">
          <div class="font-medium">Excel <span class="font-mono text-[10px] text-ruforum-text-muted">(.xlsx)</span></div>
          <div class="text-[10px] text-ruforum-text-muted">Native spreadsheet</div>
        </div>
      </a>
      <a href="{% export_url 'csv' %}"
         data-download
         class="flex items-center gap-2 rounded-b-lg border-t border-ruforum-border px-3 py-2 text-xs text-ruforum-text transition-colors hover:bg-ruforum-warm-hover"
         role="menuitem"
         @click="open = false">
        <svg class="h-4 w-4 text-ruforum-text-muted" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.75" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" d="M5 4h10v12H5z M5 8h10 M5 12h10 M9 4v12"/>
        </svg>
        <div class="flex-1">
          <div class="font-medium">CSV <span class="font-mono text-[10px] text-ruforum-text-muted">(.csv)</span></div>
          <div class="text-[10px] text-ruforum-text-muted">Plain text rows</div>
        </div>
      </a>
    </div>
  </div>
{% endif %}