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

        @if($this->categories->isEmpty())
            <div class="text-center py-5 text-muted">
                <i class="mdi mdi-bulletin-board display-4 d-block mb-3 opacity-25"></i>
                <p class="mb-0">No workboard categories have been set up yet.</p>
                @can('workboard.manage')
                    <a wire:navigate href="{{ route('workboard.categories.index') }}" class="btn btn-outline-primary mt-3">
                        <i class="mdi mdi-plus me-1"></i>Create a category
                    </a>
                @endcan
            </div>
        @else
            <div class="row g-3">
                @foreach($this->categories as $category)
                    <div class="col-md-6 col-lg-4">
                        <div class="card h-100 shadow-sm">
                            <div class="card-body d-flex flex-column">
                                <div class="d-flex align-items-start justify-content-between mb-2">
                                    <h5 class="card-title mb-0 fw-semibold">{{ $category->name }}</h5>
                                    <span class="badge {{ $category->available_items_count > 0 ? 'bg-primary' : 'bg-secondary bg-opacity-25 text-secondary' }} fs-6 ms-2 flex-shrink-0">
                                        {{ $category->available_items_count }}
                                    </span>
                                </div>

                                @if($category->description)
                                    <p class="card-text text-muted small flex-grow-1">{{ $category->description }}</p>
                                @else
                                    <div class="flex-grow-1"></div>
                                @endif

                                <a wire:navigate href="{{ route('workboard.category', $category) }}"
                                   class="btn btn-outline-primary btn-sm mt-3 w-100">
                                    <i class="mdi mdi-open-in-app me-1"></i>
                                    {{ $category->available_items_count > 0 ? 'View ' . $category->available_items_count . ' available' : 'View queue' }}
                                </a>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        @endif

    </div>
</div>
