@php($transferType = $type ?? '')
@php($transferLabel = $label ?? ucfirst($transferType))
<div class="flex flex-wrap items-center gap-2">
    @can($exportPermission ?? 'products.view')
        <a href="{{ route('data.export', ['type' => $transferType, 'format' => 'xlsx']) }}" class="btn-secondary btn-sm">
            <i data-lucide="download" class="w-3.5 h-3.5"></i> Export Excel
        </a>
        <a href="{{ route('data.export', ['type' => $transferType, 'format' => 'csv']) }}" class="btn-secondary btn-sm">
            <i data-lucide="file-down" class="w-3.5 h-3.5"></i> CSV
        </a>
    @endcan
    @can($managePermission ?? 'products.manage')
        <button type="button" class="btn-secondary btn-sm" x-on:click="$dispatch('open-modal-import-{{ $transferType }}')">
            <i data-lucide="upload" class="w-3.5 h-3.5"></i> Import
        </button>
    @endcan
</div>

@can($managePermission ?? 'products.manage')
<x-modal id="import-{{ $transferType }}" title="Import {{ $transferLabel }}">
    <form method="POST" action="{{ route('data.import', ['type' => $transferType]) }}" enctype="multipart/form-data" id="import-{{ $transferType }}-form" class="space-y-4">
        @csrf
        <div>
            <label class="field-label">Excel or CSV file</label>
            <input type="file" name="file" accept=".xlsx,.csv,.txt" class="input" required>
        </div>
        <div class="rounded-lg border border-slate-200 bg-slate-50 p-3 text-xs text-ink-muted">
            <p class="font-semibold text-ink">Important</p>
            <p class="mt-1">Use the same columns produced by <b>Export Excel</b>. Existing records are matched where possible; blank rows are ignored.</p>
        </div>
    </form>
    <x-slot:footer>
        <button class="btn-secondary" x-on:click="open = false">Cancel</button>
        <button form="import-{{ $transferType }}-form" class="btn-primary">Import</button>
    </x-slot:footer>
</x-modal>
@endcan