<div>
    @can('workboard.manage')
    {{-- Trigger button --}}
    <button type="button"
            class="btn btn-sm btn-outline-secondary"
            data-bs-toggle="modal"
            data-bs-target="#workboardAssignerModal-{{ $model->getKey() }}"
            title="Add to workboard">
        <i class="mdi mdi-bulletin-board me-1"></i>Add to Workboard
    </button>

    {{-- Modal --}}
    <div wire:ignore.self
         class="modal fade"
         id="workboardAssignerModal-{{ $model->getKey() }}"
         tabindex="-1"
         aria-labelledby="workboardAssignerLabel-{{ $model->getKey() }}"
         aria-hidden="true"
         x-on:close-workboard-assigner-modal-{{ $model->getKey() }}.window="
             bootstrap.Modal.getInstance($el)?.hide()
         ">
        <div class="modal-dialog modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title fs-6 fw-bold" id="workboardAssignerLabel-{{ $model->getKey() }}">
                        <i class="mdi mdi-bulletin-board me-2"></i>Add to Workboard
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <div class="modal-body">
                    <form wire:submit.prevent="addToWorkboard" id="workboardAssignerForm-{{ $model->getKey() }}">

                        {{-- Category selector --}}
                        <div class="mb-3">
                            <label class="form-label fw-semibold">Workboard Category <span class="text-danger">*</span></label>
                            @if($availableCategories->isEmpty())
                                <p class="text-muted small">No workboard categories exist yet.</p>
                            @else
                                <div class="border rounded" style="max-height: 200px; overflow-y: auto;">
                                    <ul class="list-group list-group-flush mb-0">
                                        @foreach($availableCategories as $cat)
                                            <li wire:click="$set('categoryId', {{ $cat->id }})"
                                                class="list-group-item list-group-item-action d-flex align-items-center gap-2 {{ $categoryId == $cat->id ? 'active' : '' }}"
                                                style="cursor: pointer;">
                                                <i class="mdi mdi-folder-outline"></i>
                                                <span class="fw-medium">{{ $cat->name }}</span>
                                                @if($cat->description)
                                                    <span class="small text-muted ms-auto text-truncate" style="max-width: 140px;">{{ $cat->description }}</span>
                                                @endif
                                            </li>
                                        @endforeach
                                    </ul>
                                </div>
                                @error('categoryId') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                            @endif
                        </div>

                        {{-- Title --}}
                        <div class="mb-3">
                            <label class="form-label fw-semibold">Item Title <span class="text-danger">*</span></label>
                            <input type="text" wire:model="title" class="form-control">
                            @error('title') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                        </div>

                        {{-- Description --}}
                        <div class="mb-3">
                            <label class="form-label fw-semibold">Description <span class="text-muted fw-normal">(optional)</span></label>
                            <textarea wire:model="description" rows="2" class="form-control" placeholder="Additional context for the agent..."></textarea>
                            @error('description') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                        </div>

                        {{-- Due At --}}
                        <div class="mb-3">
                            <label class="form-label fw-semibold">Due Date <span class="text-muted fw-normal">(optional)</span></label>
                            <input type="datetime-local" wire:model="due_at" class="form-control">
                            @error('due_at') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                        </div>

                    </form>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit"
                            form="workboardAssignerForm-{{ $model->getKey() }}"
                            class="btn btn-primary"
                            wire:loading.attr="disabled"
                            wire:target="addToWorkboard">
                        <span wire:loading.remove wire:target="addToWorkboard">
                            <i class="mdi mdi-plus me-1"></i>Add to Queue
                        </span>
                        <span wire:loading wire:target="addToWorkboard">
                            <span class="spinner-border spinner-border-sm me-1"></span>Adding...
                        </span>
                    </button>
                </div>
            </div>
        </div>
    </div>
    @endcan
</div>
