@props(['athletes', 'selectedAthleteId' => null])

<div class="dropdown d-none d-lg-block">
    <button class="btn btn-glass dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        <x-icon name="users" class="me-1" />
        {{ $athletes->firstWhere('id', $selectedAthleteId)?->displayName() ?? 'Seleziona atleta' }}
    </button>
    <div class="dropdown-menu dropdown-menu-end p-2" style="min-width: 20rem">
        <label for="athlete-selector-search" class="form-label small">Cerca atleta</label>
        <input id="athlete-selector-search" type="search" class="form-control form-control-sm mb-2" placeholder="Nome o e-mail" data-athlete-search>
        <div class="list-group list-group-flush overflow-auto" style="max-height: 18rem" data-athlete-options>
            <a href="{{ route('coach.dashboard', ['overview' => 1]) }}"
               class="list-group-item list-group-item-action px-2 {{ $selectedAthleteId ? '' : 'active' }}">
                <span class="d-block fw-semibold">Panoramica atleti</span>
                <small>Nessun atleta selezionato</small>
            </a>
            @forelse($athletes as $athlete)
                <a href="{{ route('coach.dashboard.athlete', $athlete) }}"
                   class="list-group-item list-group-item-action px-2 {{ $athlete->id === $selectedAthleteId ? 'active' : '' }}"
                   data-athlete-option="{{ \Illuminate\Support\Str::lower($athlete->displayName().' '.$athlete->email) }}"
                   @if($athlete->id === $selectedAthleteId) aria-current="true" @endif>
                    <span class="d-block fw-semibold">{{ $athlete->displayName() }}</span>
                    <small>{{ $athlete->currentSubscription?->status?->label() ?? 'Nessun accesso' }} · {{ $athlete->currentSubscription ? francoach_format_date($athlete->currentSubscription->expires_at) : '—' }}</small>
                </a>
            @empty
                <span class="small text-body-secondary p-2">Nessun atleta.</span>
            @endforelse
        </div>
    </div>
</div>