<div>
    <x-title>Workboard Categories</x-title>
    <div class="container">

        <!-- Form -->
        <div class="card mb-4">
            <div class="card-body p-4">
                <h3 class="h5 fw-semibold mb-4">{{ $isEditing ? 'Edit Category' : 'Create New Category' }}</h3>

                <form wire:submit.prevent="save">
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Category Name</label>
                        <input type="text" wire:model="name" class="form-control" placeholder="e.g. DSAR Responses">
                        @error('name') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                    </div>

                    <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="Brief description of this queue..."></textarea>
                        @error('description') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                    </div>

                    <div class="d-flex justify-content-end gap-2">
                        @if($isEditing)
                            <button type="button" wire:click="resetForm" class="btn btn-outline-secondary">Cancel</button>
                        @endif
                        <button type="submit" class="btn btn-primary">
                            {{ $isEditing ? 'Update Category' : 'Create Category' }}
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <!-- Categories List -->
        <div class="list-group shadow-sm">
            @forelse($categories as $category)
                <div class="list-group-item d-flex justify-content-between align-items-center p-3">
                    <div>
                        <div class="d-flex align-items-center gap-2 mb-1">
                            <span class="fw-semibold">{{ $category->name }}</span>
                            <code class="text-muted small">{{ $category->slug }}</code>
                        </div>
                        @if($category->description)
                            <p class="text-muted small mb-1">{{ $category->description }}</p>
                        @endif
                        <span class="badge bg-secondary bg-opacity-10 text-secondary border">
                            {{ $category->items_count }} {{ Str::plural('item', $category->items_count) }}
                        </span>
                    </div>

                    <div class="d-flex gap-3 align-items-center ms-3">
                        <button wire:click="edit({{ $category->id }})" class="btn btn-sm btn-link p-0 text-secondary" title="Edit">
                            <i class="mdi mdi-pencil"></i>
                        </button>
                        <button wire:click="delete({{ $category->id }})"
                                wire:confirm="Delete '{{ $category->name }}'? This cannot be undone."
                                class="btn btn-sm btn-link p-0 text-danger" title="Delete">
                            <i class="mdi mdi-trash-can"></i>
                        </button>
                    </div>
                </div>
            @empty
                <div class="list-group-item text-center py-5 text-muted">
                    No workboard categories yet. Create one above.
                </div>
            @endforelse
        </div>

    </div>
</div>
