@php
    $tabs = [
        ['key' => 'my-bd', 'label' => 'Moi'],
        ['key' => 'my-team-bd', 'label' => 'Mon équipe'],
    ];
@endphp

<x-filament::section heading="Bande passante">
     <x-slot name="afterHeader">
        @if($activeBDTab === 'my-bd')
        <a
        href="{{ \App\Filament\App\Pages\Bandwidth\MyBandwidth::getUrl(panel: 'app') }}"
        class="shrink-0 text-gray-500 transition-colors hover:text-gray-800 dark:text-gray-600 dark:hover:text-gray-400"
        >
        @else
        <a
        href="{{ \App\Filament\App\Pages\Bandwidth\TeamBandwidth::getUrl(panel: 'app') }}"
        class="shrink-0 text-gray-500 transition-colors hover:text-gray-800 dark:text-gray-600 dark:hover:text-gray-400"
        >
        @endif
            <x-filament::icon icon="heroicon-o-chevron-right" class="h-4 w-4" />
        </a>
     </x-slot>
    @if($this->currentPersonIsManager())
    <div class="-mx-6 -mt-6 flex border-b border-gray-100 dark:border-white/5">
        @foreach ($tabs as $tab)
            <button
                type="button"
                wire:click="setBDTab('{{ $tab['key'] }}')"
                class="flex-1 border-b-2 px-4 py-3 text-center transition-colors"
                @style([
                    'border-color: var(--primary-500)' => $activeBDTab === $tab['key'],
                    'border-color: transparent' => $activeBDTab !== $tab['key'],
                ])
            >
                <div
                    @class([
                        'text-sm font-semibold',
                        'text-primary-600 dark:text-primary-400' => $activeBDTab === $tab['key'],
                        'text-gray-500 dark:text-gray-400' => $activeBDTab !== $tab['key'],
                    ])
                >
                    {{ $tab['label'] }}
                </div>
            </button>
        @endforeach
    </div>
    @endif
    @php $bandwidth = $this->currentTabBD(); @endphp

    @if (! $bandwidth)
        <div class="px-6 py-10 text-center text-sm text-gray-400 dark:text-gray-500">
            Aucune donnée disponible
        </div>
    @else
        @php
            $pillClasses = [
                'warning' => 'bg-warning-50 text-warning-600 dark:bg-warning-500/10 dark:text-warning-400',
                'ok' => 'bg-success-50 text-success-600 dark:bg-success-500/10 dark:text-success-400',
                'over' => 'bg-danger-50 text-danger-600 dark:bg-danger-500/10 dark:text-danger-400',
            ];
            $barClasses = [
                'warning' => 'bg-warning-500',
                'ok' => 'bg-success-500',
                'over' => 'bg-danger-500',
            ];
            $labels = ['warning' => 'Limite', 'ok' => 'Équilibrée', 'over' => 'Surchargée'];
            $percent = $bandwidth['capacity'] > 0
                ? min(100, (int) round($bandwidth['hours'] / $bandwidth['capacity'] * 100))
                : 0;
        @endphp
        
        <div class="flex items-baseline gap-2 mt-3">
            <span class="text-2xl font-bold text-gray-950 dark:text-white">{{ rtrim(rtrim(number_format($bandwidth['hours'], 1), '0'), '.') }}h</span>
            <span class="text-sm text-gray-500 dark:text-gray-400">
                / {{ rtrim(rtrim(number_format($bandwidth['capacity'], 1), '0'), '.') }}h cette semaine
            </span>
        </div>
        <div class="flex gap-2 mt-2">
        <span class="inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-semibold {{ $pillClasses[$bandwidth['status']] }}">
            {{ $labels[$bandwidth['status']] }}
        </span>
        @if($bandwidth['alert_team_bandwith'])
        <span class="h-5 w-5 mt-0.5 justify-center rounded-lg text-warning-700 dark:text-warning-400">
            <x-filament::icon 
                icon="heroicon-o-exclamation-triangle" class="h-5 w-5" 
                x-tooltip="{ content: 'Un membre de l\\'équipe est surchargé.', theme: $store.theme, placement: 'bottom'}"
                />
        </span>
        @endif
        </div>
        <div class="mt-4 h-2 w-full overflow-hidden rounded-full bg-gray-100 dark:bg-white/5">
            <div class="h-full rounded-full {{ $barClasses[$bandwidth['status']] }}" style="width: {{ $percent }}%"></div>
        </div>
    @endif
</x-filament::section>