{{--
    The 5 stat tiles from the Able Pro mockup. Data comes from a single
    `$this->dashboardMetrics()` call (see Dashboard.php) instead of one
    method per tile — this partial just loops over it. Only "À faire"
    carries a real value right now; the rest are `0` placeholders.

    Color classes are hardcoded per key (not string-interpolated) on
    purpose — Tailwind only generates classes it finds as literal text in
    source files, so `bg-{{ $color }}-50` would silently fail to compile.

    Each tile ends with a chevron link (`$metric['url']`) for navigating to
    the filtered list behind that count — every tile points to `#` for now
    since that list view doesn't exist yet (see the `url` docblock on
    `dashboardMetrics()`).
--}}
@php
    $colorClasses = [
        'gray' => 'bg-gray-100 text-gray-600 dark:bg-white/5 dark:text-gray-400',
        'primary' => 'bg-primary-50 text-primary-600 dark:bg-primary-500/10 dark:text-primary-400',
        'danger' => 'bg-danger-50 text-danger-600 dark:bg-danger-500/10 dark:text-danger-400',
        'warning' => 'bg-warning-50 text-warning-600 dark:bg-warning-500/10 dark:text-warning-400',
        'success' => 'bg-success-50 text-success-600 dark:bg-success-500/10 dark:text-success-400',
    ];
@endphp

<div class="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-5">
    @foreach ($this->dashboardMetrics() as $metric)
        <x-filament::section>
            <div class="flex items-center gap-3.5">
                <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg {{ $colorClasses[$metric['color']] }}">
                    <x-filament::icon :icon="$metric['icon']" class="h-5 w-5" />
                </span>

                <div class="min-w-0 flex-1">
                    <div class="text-xl font-bold text-gray-950 dark:text-white">
                        {{ $metric['value'] }}
                    </div>
                    <div class="truncate text-xs text-gray-500 dark:text-gray-400">
                        {{ $metric['label'] }}
                    </div>
                </div>

                <a
                    href="{{ $metric['url'] }}"
                    class="shrink-0 text-gray-500 transition-colors hover:text-gray-800 dark:text-gray-600 dark:hover:text-gray-400"
                >
                    <x-filament::icon icon="heroicon-o-chevron-right" class="h-4 w-4" />
                </a>
            </div>
        </x-filament::section>
    @endforeach
</div>