<div class="w-100">
    <div class="mb-3">
        <div class="d-flex align-items-center justify-content-between mb-2">
            <label class="form-label fw-semibold mb-0 text-muted">Tags</label>
            <button type="button" class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#tagModal-{{ $model->id ?? 'new' }}">
                <i class="mdi mdi-plus"></i>
            </button>
        </div>

        <!-- Render Assigned Tags -->
        <div class="d-flex flex-wrap gap-2" style="min-height: 32px;">
            @forelse($model->tags as $tag)
                <span style="background-color: {{ $tag->color }}1A; color: {{ $tag->color }}; border: 1px solid {{ $tag->color }};"
                      class="badge rounded-pill d-inline-flex align-items-center fw-normal fs-6 px-2 py-1">
                    {{ $tag->name }}
                    <button wire:confirm="Are you sure you want to remove this tag?" wire:click="removeTag({{ $tag->id }})" class="btn btn-link btn-sm p-0 ms-1 text-decoration-none" style="color: inherit; opacity: 0.6;" onmouseover="this.style.opacity=1" onmouseout="this.style.opacity=0.6" title="Remove tag">
                        <svg style="width: 14px; height: 14px;" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                        </svg>
                    </button>
                </span>
            @empty
                <span class="text-muted small">No tags assigned.</span>
            @endforelse
        </div>
    </div>

    <!-- Add Tags Modal -->
    <div wire:ignore.self class="modal fade" id="tagModal-{{ $model->id ?? 'new' }}" tabindex="-1" aria-labelledby="tagModalLabel-{{ $model->id ?? 'new' }}" aria-hidden="true">
        <div class="modal-dialog modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title fs-6 fw-bold" id="tagModalLabel-{{ $model->id ?? 'new' }}">Assign Tags</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body pb-4">
                    <div class="position-relative mb-3">
                        <input type="text" wire:model.live.debounce.300ms="search"
                               placeholder="Type to search and add tags..."
                               class="form-control pe-5">

                        <div wire:loading wire:target="search" class="position-absolute top-50 end-0 translate-middle-y me-3">
                            <div class="spinner-border spinner-border-sm text-primary" role="status">
                                <span class="visually-hidden">Loading...</span>
                            </div>
                        </div>
                    </div>

                    <!-- Tag List -->
                    <div class="border rounded" style="max-height: 320px; overflow-y: auto;">
                        <ul class="list-group list-group-flush mb-0">
                            @forelse($availableTags as $tag)
                                <li wire:click="assignTag({{ $tag->id }})"
                                    class="list-group-item list-group-item-action d-flex align-items-center gap-2"
                                    style="cursor: pointer;">
                                    <span class="rounded-circle flex-shrink-0"
                                          style="width: 12px; height: 12px; background-color: {{ $tag->color }}"></span>
                                    <span class="fw-medium text-dark text-truncate">{{ $tag->name }}</span>
                                    @if($tag->description)
                                        <span class="small text-muted ms-auto text-truncate" style="max-width: 160px;">{{ $tag->description }}</span>
                                    @endif
                                </li>
                            @empty
                                <li class="list-group-item text-muted text-center py-4 small" style="cursor: default;">
                                    {{ empty($search) ? 'No available tags to assign.' : 'No tags match your search.' }}
                                </li>
                            @endforelse
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>