<x-ui.modals type="modal" id="kocPickerModal" title="Thêm KOC vào chiến dịch" size="md">
    {{-- Toolbar: search + selected count --}}
    <div class="flex items-center gap-3 mb-3">
        <div class="filter-search-inline flex-1">
            <div class="search-input-icon">
                @svg('fas-search', 'search-icon')
            </div>
            <input
                type="text"
                id="koc-picker-search"
                placeholder="Tìm kiếm KOC..."
                class="search-input"
                x-model="pickerSearch"
                @input.debounce="updatePickerState()"
            />
        </div>

        <span class="text-xs text-gray-500 whitespace-nowrap">
            Đã chọn: <strong id="koc-picker-selected-count" x-text="pickerSelected.length"></strong>
        </span>
    </div>

    {{-- KOC list table Alpine template --}}
    <div class="table-wrap compact fix-layout-table">
        <table style="table-layout: fixed;">
            <thead>
                <tr>
                    <th style="width:32px; text-align:center;">
                        <input type="checkbox"
                               id="koc-picker-select-all"
                               :checked="pickerSelectAll"
                               :disabled="pickerAvailable.length === 0"
                               @change="togglePickerSelectAll" />
                    </th>
                    <th style="width:30%;"><span style="white-space: nowrap;">Tên KOC</span></th>
                    <th style="width:30%;"><span style="white-space: nowrap;">Link</span></th>
                    <th style="width:40%;"><span style="white-space: nowrap;">Liên hệ</span></th>
                </tr>
            </thead>
            <tbody id="koc-picker-list">
                <template x-if="pickerAvailable.length === 0">
                    <tr>
                        <td colspan="4" style="text-align:center; padding:24px 10px; color:var(--gray-500);">
                            Không có KOC phù hợp.
                        </td>
                    </tr>
                </template>
                <template x-for="koc in pickerAvailable" :key="koc.id">
                    <tr :class="{ 'kb-checked': pickerSelected.includes(koc.id) }">
                        <td style="text-align:center; width:32px;">
                            <input type="checkbox" class="koc-picker-checkbox"
                                   :checked="pickerSelected.includes(koc.id)"
                                   @change="togglePickerKoc(koc.id)" />
                        </td>
                        <td style="width:30%;"><span class="cell-truncate" x-text="koc.creator_name || 'KOC ' + koc.id"></span></td>
                        <td style="width:30%;" class="link-cell">
                            <span x-html="window.buildSocialLinksHtml(koc) || '-'"></span>
                        </td>
                        <td style="width:40%;">
                            <span x-html="window.buildContactButtonHtml(koc) || '-'"></span>
                        </td>
                    </tr>
                </template>
            </tbody>
        </table>
    </div>

    <x-slot name="footer">
        <div class="flex items-center justify-between w-full" style="display:flex;align-items:center;justify-content:space-between;width:100%;">
            <div class="flex items-center gap-4">
                <span class="text-xs font-medium text-gray-600">Loại booking:</span>
                <label class="checkbox-item" style="display:flex;align-items:center;gap:6px;cursor:pointer;font-size:12px;">
                    <input type="radio" name="pickerBookingType" value="video" x-model="pickerBookingType" />
                    <span>Video</span>
                </label>
                <label class="checkbox-item" style="display:flex;align-items:center;gap:6px;cursor:pointer;font-size:12px;">
                    <input type="radio" name="pickerBookingType" value="livestream" x-model="pickerBookingType" />
                    <span>Livestream</span>
                </label>
            </div>
            <div class="flex items-center gap-3">
                <x-ui.buttons type="toolbar-button" variant="ghost" label="Hủy" @click="closePickerModal()" />
                <x-ui.buttons type="toolbar-button" variant="primary" label="Thêm KOC" @click="handleConfirmAddKocs()" />
            </div>
        </div>
    </x-slot>
</x-ui.modals>