@props(['route', 'params' => []])
{{-- "Export" drop-down (CSV / Excel / PDF). Downloads exactly what is on screen
     because the current filters are passed along. Hidden without the export permission. --}}
@can('reports.export')
    <div class="relative" x-data="{ open: false }" x-on:click.outside="open = false" x-on:keydown.escape="open = false">
        <button type="button" class="btn-primary btn-sm" x-on:click="open = !open">
            <i data-lucide="download" class="w-3.5 h-3.5"></i> Export
            <i data-lucide="chevron-down" class="w-3 h-3"></i>
        </button>
        <div x-show="open" x-cloak x-transition.opacity
             class="absolute right-0 z-30 mt-1.5 w-48 bg-white border border-border rounded-lg shadow-lg py-1">
            @foreach (['csv' => ['CSV (.csv)', 'file-text'], 'xlsx' => ['Excel (.xlsx)', 'file-spreadsheet'], 'pdf' => ['PDF (.pdf)', 'file-type']] as $format => [$label, $icon])
                <a href="{{ route($route, array_merge($params, ['format' => $format])) }}"
                   class="flex items-center gap-2.5 px-3 py-2 text-sm text-ink hover:bg-ink/5" x-on:click="open = false">
                    <i data-lucide="{{ $icon }}" class="w-4 h-4 text-ink-muted"></i> {{ $label }}
                </a>
            @endforeach
        </div>
    </div>
@endcan