<x-wireui:modal-card title="{{ __('artists.ImportData') }}" blur wire:model.defer="showModal">
    
    {{-- 說明區塊 --}}
    <div class="mb-4 p-4 bg-gray-100 border border-gray-300 rounded text-sm text-gray-700">
        <p class="font-semibold mb-2">匯入格式說明</p>
        <p class="mb-2">請依下列表格格式準備 CSV 檔案：</p>

        <div class="overflow-x-auto">
            <table class="min-w-full text-sm text-left border border-collapse border-gray-300 mb-2">
                <thead class="bg-gray-200">
                    <tr>
                        <th class="border border-gray-300 px-3 py-1">類別</th>
                        <th class="border border-gray-300 px-3 py-1">名稱</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="border border-gray-300 px-3 py-1">男</td>
                        <td class="border border-gray-300 px-3 py-1">某男</td>
                    </tr>
                    <tr>
                        <td class="border border-gray-300 px-3 py-1">女</td>
                        <td class="border border-gray-300 px-3 py-1">某女</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <p class="text-gray-600 text-xs">
            ※ 類別欄位僅可使用：<strong>男</strong>、<strong>女</strong>、<strong>團</strong>、<strong>外</strong>、<strong>其他</strong>。
        </p>
    </div>

    {{-- 檔案上傳 --}}
    <input type="file" wire:model="file" accept=".csv, .xls, .xlsx" class="mb-4 w-full" />
    
    <x-slot name="footer">
        <div class="flex justify-between w-full">
            <x-wireui:button flat label="{{ __('artists.cancel') }}" wire:click="closeModal" />
            <x-wireui:button primary label="{{ __('artists.submit') }}" wire:click="import" />
        </div>
    </x-slot>
</x-wireui:modal-card>