<?php

use App\Livewire\Actions\Logout;
use Livewire\Volt\Component;

new class extends Component
{
    public function logout(Logout $logout): void
    {
        $logout();

        $this->redirect('/', navigate: true);
    }
}; ?>

<div class="sticky top-0 z-20">
    <header class="bg-background/80 backdrop-blur-xl border-b border-border/50">
        <div class="max-w-5xl mx-auto px-4 sm:px-6">
            <div class="flex h-16 items-center justify-between gap-2">
                @auth
                    <a href="{{ route('collabs.board') }}" class="flex min-w-0 items-center gap-3 shrink-0">
                @else
                    <a href="{{ url('/') }}" wire:navigate class="flex min-w-0 items-center gap-3 shrink-0">
                @endauth
                    <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-foreground">
                        <x-icons.utensils class="text-primary-foreground" />
                    </div>
                    <div class="min-w-0 text-left">
                        <p class="text-lg font-bold tracking-tight text-foreground leading-none">{{ config('app.name', 'Collabs') }}</p>
                    </div>
                </a>

                <nav class="flex items-center gap-1 sm:gap-2 shrink-0" aria-label="Main">
                    @auth
                        <div class="hidden md:flex items-center gap-1">
                            <a
                                href="{{ url('/') }}"
                                wire:navigate
                                class="inline-flex items-center rounded-xl px-3 py-2 text-sm font-medium transition-colors {{ request()->is('/') ? 'bg-secondary text-foreground' : 'text-muted-foreground hover:text-foreground hover:bg-secondary/60' }}"
                            >
                                Home
                            </a>
                            <a
                                href="{{ route('collabs.board') }}"
                                class="inline-flex items-center rounded-xl px-3 py-2 text-sm font-medium transition-colors {{ request()->routeIs('collabs.board') ? 'bg-secondary text-foreground' : 'text-muted-foreground hover:text-foreground hover:bg-secondary/60' }}"
                            >
                                Board
                            </a>
                            <a
                                href="{{ route('collabs.settings') }}"
                                class="inline-flex items-center rounded-xl px-3 py-2 text-sm font-medium transition-colors {{ request()->routeIs('collabs.settings') ? 'bg-secondary text-foreground' : 'text-muted-foreground hover:text-foreground hover:bg-secondary/60' }}"
                            >
                                Settings
                            </a>
                            <a
                                href="{{ route('profile') }}"
                                wire:navigate
                                class="inline-flex items-center rounded-xl px-3 py-2 text-sm font-medium transition-colors {{ request()->routeIs('profile') ? 'bg-secondary text-foreground' : 'text-muted-foreground hover:text-foreground hover:bg-secondary/60' }}"
                            >
                                Profile
                            </a>
                        </div>

                        <div class="hidden sm:flex sm:items-center sm:ms-2">
                            <x-dropdown align="right" width="48">
                                <x-slot name="trigger">
                                    <button type="button" class="inline-flex items-center gap-1 rounded-xl px-3 py-2 text-sm font-medium text-muted-foreground hover:text-foreground hover:bg-secondary/60 transition-colors">
                                        <span class="max-w-[10rem] truncate">{{ auth()->user()->name }}</span>
                                        <svg class="h-4 w-4 shrink-0 opacity-60" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/></svg>
                                    </button>
                                </x-slot>
                                <x-slot name="content">
                                    <x-dropdown-link :href="route('profile')" wire:navigate>
                                        {{ __('Profile') }}
                                    </x-dropdown-link>
                                    <button wire:click="logout" type="button" class="w-full text-start">
                                        <x-dropdown-link>
                                            {{ __('Log Out') }}
                                        </x-dropdown-link>
                                    </button>
                                </x-slot>
                            </x-dropdown>
                        </div>

                        <div class="-me-2 flex items-center sm:hidden">
                            <x-dropdown align="right" width="48">
                                <x-slot name="trigger">
                                    <button type="button" class="inline-flex items-center justify-center p-2 rounded-xl text-muted-foreground hover:bg-secondary/60">
                                        <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg>
                                    </button>
                                </x-slot>
                                <x-slot name="content">
                                    <x-dropdown-link :href="route('profile')" wire:navigate>{{ __('Profile') }}</x-dropdown-link>
                                    <button wire:click="logout" type="button" class="w-full text-start">
                                        <x-dropdown-link>{{ __('Log Out') }}</x-dropdown-link>
                                    </button>
                                </x-slot>
                            </x-dropdown>
                        </div>
                    @else
                        @if (! request()->routeIs('login'))
                            <a href="{{ route('login') }}" wire:navigate class="inline-flex items-center justify-center rounded-xl bg-foreground px-4 py-2 text-sm font-semibold text-primary-foreground shadow-sm hover:opacity-90 transition-opacity">
                                {{ __('Sign in') }}
                            </a>
                        @endif
                    @endauth
                </nav>
            </div>
        </div>
    </header>
</div>
