@props(['project', 'active' => 'board'])

@php
    $tabs = [
        'board' => ['label' => 'Tableau', 'route' => 'projects.show'],
        'list' => ['label' => 'Liste', 'route' => 'projects.list'],
        'timeline' => ['label' => 'Timeline', 'route' => 'projects.timeline'],
        'settings' => ['label' => 'Paramètres', 'route' => 'projects.settings'],
    ];
@endphp

<div class="space-y-4">
    <div class="flex flex-wrap items-center justify-between gap-3">
        <div class="flex items-center gap-3">
            <a href="{{ route('projects.index') }}" wire:navigate class="text-slate-400 hover:text-slate-600">
                <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" /></svg>
            </a>
            <span class="flex h-10 w-10 items-center justify-center rounded-lg text-sm font-bold text-white" style="background: {{ $project->color }}">
                {{ Str::substr($project->key, 0, 2) }}
            </span>
            <div>
                <div class="flex items-center gap-2">
                    <h1 class="text-xl font-bold text-slate-900">{{ $project->name }}</h1>
                    <x-status-badge :status="$project->status" />
                </div>
                <span class="font-mono text-xs text-slate-400">{{ $project->key }}</span>
            </div>
        </div>

        <div class="flex items-center gap-3">
            <div class="flex -space-x-2">
                @foreach($project->members->take(5) as $member)
                    <x-avatar :user="$member" size="sm" />
                @endforeach
            </div>
        </div>
    </div>

    <div class="flex gap-1 border-b border-slate-200">
        @foreach($tabs as $key => $tab)
            <a href="{{ route($tab['route'], $project) }}" wire:navigate
               class="border-b-2 px-4 py-2.5 text-sm font-medium transition {{ $active === $key ? 'border-brand-600 text-brand-600' : 'border-transparent text-slate-500 hover:text-slate-700' }}">
                {{ $tab['label'] }}
            </a>
        @endforeach
    </div>
</div>