@props(['notifications' => null])

<header class="app-topbar">
    <a href="{{ auth()->check() ? route(auth()->user()->dashboardRouteName()) : route('home') }}"
       class="app-topbar__brand"
       aria-label="{{ config('app.name', 'FranCoach') }}, dashboard">
        @if (francoach_has_branding_asset('logo_francoach.webp'))
            <img src="{{ asset('assets/images/branding/logo_francoach.webp') }}" alt="" class="app-topbar__brand-mark">
        @else
            <x-icon name="zap" />
        @endif
        <span>{{ config('app.name', 'FranCoach') }}</span>
    </a>

    <div class="app-topbar__actions ms-auto">
        @auth
            @if(auth()->user()->isCoach())
                <x-athlete-selector :athletes="$athletes" :selected-athlete-id="$selectedAthleteId" />
            @endif
            <x-notifications-panel :notifications="$notifications" />
            @if (auth()->user()->isAthlete())
                <a href="{{ route('athlete.profile.show') }}" class="app-topbar__icon-btn" aria-label="Impostazioni">
                    <x-icon name="settings" />
                </a>
            @endif

            <div class="dropdown">
                <button type="button"
                        class="app-topbar__user"
                        id="userMenuButton"
                        data-bs-toggle="dropdown"
                        aria-expanded="false"
                        aria-label="Apri menu utente di {{ auth()->user()->displayName() }}">
                    @if (auth()->user()->avatar_path)
                        <img src="{{ asset('storage/'.auth()->user()->avatar_path) }}"
                             alt=""
                             class="rounded-circle"
                             width="36"
                             height="36">
                    @elseif (francoach_has_branding_asset('logo_francoach.webp') && auth()->user()->isCoach())
                        <img src="{{ asset('assets/images/branding/logo_francoach.webp') }}"
                             alt=""
                             class="app-topbar__avatar-brand"
                             width="36"
                             height="36">
                    @else
                        <span class="avatar-fallback app-topbar__avatar">{{ francoach_initials(auth()->user()->displayName()) }}</span>
                    @endif
                    <span class="app-topbar__user-copy">
                        <strong>{{ auth()->user()->displayName() }}</strong>
                        <small>{{ auth()->user()->role->label() }}</small>
                    </span>
                    <x-icon name="chevron-down" />
                </button>
                <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userMenuButton">
                    @if (auth()->user()->isAthlete())
                        <li>
                            <a class="dropdown-item" href="{{ route('athlete.profile.show') }}">
                                <x-icon name="user" class="me-2" />Il mio profilo
                            </a>
                        </li>
                    @endif
                    <li>
                        <a class="dropdown-item" href="{{ route('profile.password.edit') }}">
                            <x-icon name="key" class="me-2" />Cambia password
                        </a>
                    </li>
                    <li><hr class="dropdown-divider"></li>
                    <li>
                        <form method="POST" action="{{ route('logout') }}">
                            @csrf
                            <button type="submit" class="dropdown-item">
                                <x-icon name="log-out" class="me-2" />Esci
                            </button>
                        </form>
                    </li>
                </ul>
            </div>
        @else
            <a href="{{ route('login') }}" class="btn btn-primary btn-sm">Accedi</a>
        @endauth
    </div>
</header>