<div>
    {{-- ================================================================
         HEADER
    ================================================================ --}}
    <div class="flex flex-wrap items-center justify-between gap-3 mb-5">
        <div>
            <h2 class="text-xl font-bold">Incidencias del proyecto</h2>
            <p class="text-sm text-base-content/60">Gestión de incidencias y problemas</p>
        </div>
        <div class="flex items-center gap-2">
            @can('edit issues')
                <a
                    href="{{ route('projects.issues.checklists', $project) }}"
                    wire:navigate
                    class="btn btn-ghost btn-sm gap-2"
                >
                    <x-heroicon-o-clipboard-document-check class="w-4 h-4" />
                    Plantillas
                </a>
            @endcan
            @can('create issues')
                <a
                    href="{{ route('projects.issues.create', $project) }}"
                    wire:navigate
                    class="btn btn-primary btn-sm gap-2"
                >
                    <x-heroicon-o-plus class="w-4 h-4" />
                    Nueva incidencia
                </a>
            @endcan
        </div>
    </div>

    {{-- ================================================================
         STATS BAR
    ================================================================ --}}
    <div class="flex flex-wrap gap-2 mb-5">
        <div class="stat bg-base-200 rounded-box py-2 px-4 flex-1 min-w-[120px]">
            <div class="stat-title text-xs">Abiertos</div>
            <div class="stat-value text-error text-2xl">{{ $countOpen }}</div>
        </div>
        <div class="stat bg-base-200 rounded-box py-2 px-4 flex-1 min-w-[120px]">
            <div class="stat-title text-xs">En revisión</div>
            <div class="stat-value text-warning text-2xl">{{ $countInReview }}</div>
        </div>
        <div class="stat bg-base-200 rounded-box py-2 px-4 flex-1 min-w-[120px]">
            <div class="stat-title text-xs">Resueltos</div>
            <div class="stat-value text-success text-2xl">{{ $countResolved }}</div>
        </div>
        <div class="stat bg-base-200 rounded-box py-2 px-4 flex-1 min-w-[120px]">
            <div class="stat-title text-xs">Cerrados</div>
            <div class="stat-value text-base-content/50 text-2xl">{{ $countClosed }}</div>
        </div>
        <div class="stat bg-base-200 rounded-box py-2 px-4 flex-1 min-w-[120px]">
            <div class="stat-title text-xs">Total</div>
            <div class="stat-value text-2xl">{{ $countTotal }}</div>
        </div>
    </div>

    {{-- ================================================================
         ISSUES TABLE (Rappasoft)
    ================================================================ --}}
    <livewire:issues.issue-table :project-id="$project->id" :key="'issue-table-'.$project->id" />
</div>
