@props([
    'title' => 'Import Data',
    'close' => 'closeImport',
    'submit' => 'import',
    'fileModel' => 'importFile',
    'accept' => '.xlsx,.xls,.csv',
    'note' => null,
    'templateAction' => null,
])

<x-ui.modal :title="$title" :close="$close" :submit="$submit" confirmLabel="Import" maxWidth="max-w-lg">
    <div class="space-y-4">
        @if ($templateAction)
            <div class="flex items-center justify-between gap-3 rounded-lg bg-emerald-50 dark:bg-emerald-500/10 px-3 py-2.5">
                <span class="text-xs text-emerald-700 dark:text-emerald-400">Belum punya formatnya? Unduh template dulu, isi, lalu import.</span>
                <button type="button" wire:click="{{ $templateAction }}"
                    class="inline-flex items-center gap-1.5 shrink-0 text-xs font-semibold text-emerald-700 dark:text-emerald-400 hover:underline">
                    <x-ui.icon name="download" size="w-4 h-4" /> Unduh Template
                </button>
            </div>
        @endif

        <div>
            <label class="block text-sm font-medium text-foreground mb-1">File Excel / CSV</label>
            <input type="file" wire:model="{{ $fileModel }}" accept="{{ $accept }}"
                class="block w-full text-sm text-foreground file:mr-3 file:py-2 file:px-4 file:rounded-lg file:border-0 file:bg-emerald-600 file:text-white file:text-sm file:font-medium hover:file:bg-emerald-700 file:cursor-pointer">
            <div wire:loading wire:target="{{ $fileModel }}" class="text-xs text-muted-foreground mt-2">Mengunggah file…</div>
            @error($fileModel)<span class="text-xs text-rose-500 mt-1 block">{{ $message }}</span>@enderror
        </div>

        @if ($note)
            <p class="text-xs text-muted-foreground">{{ $note }}</p>
        @endif

        {{ $slot }}
    </div>
</x-ui.modal>