<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title', 'مربیان') | آبتین اسپرت</title>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <x-pwa-head />
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>
<body class="bg-paper text-ink-900 antialiased">

<header class="bg-ink-950 text-slate-300">
    <div class="max-w-4xl mx-auto px-4 md:px-6 h-14 flex items-center justify-between">
        <a href="{{ route('home') }}" class="flex items-center gap-2 text-white font-semibold text-sm">
            <span class="flex h-7 w-7 items-center justify-center rounded-lg bg-ember-500/15 text-ember-500">
                <x-icon name="flame" class="w-4 h-4" />
            </span>
            آبتین اسپرت
        </a>
        <div class="flex items-center gap-3 text-sm">
            @auth
                <x-notification-bell />
                @if(auth()->user()->isCoach())
                    <a href="{{ route('coach.dashboard') }}" class="text-slate-300 hover:text-white">پنل من</a>
                @elseif(auth()->user()->isAthlete())
                    <a href="{{ route('athlete.dashboard') }}" class="text-slate-300 hover:text-white">پنل من</a>
                @elseif(auth()->user()->isAdmin())
                    <a href="{{ route('admin.dashboard') }}" class="text-slate-300 hover:text-white">پنل مدیریت</a>
                @endif
                <form method="POST" action="{{ route('logout') }}">
                    @csrf
                    <button type="submit" class="text-slate-400 hover:text-white" title="خروج">
                        <x-icon name="logout" class="w-[18px] h-[18px]" />
                    </button>
                </form>
            @else
                <a href="{{ route('login') }}" class="btn-primary btn-sm">ورود</a>
            @endauth
        </div>
    </div>
</header>

<main class="max-w-4xl mx-auto p-4 md:p-6">
    @if (session('status'))
        <div class="mb-5 flex items-center gap-2 rounded-xl bg-emerald-50 text-emerald-700 px-4 py-3 text-sm">
            <x-icon name="check" class="w-4 h-4 shrink-0" /> {{ session('status') }}
        </div>
    @endif
    @if ($errors->any())
        <div class="mb-5 rounded-xl bg-ember-50 text-ember-700 px-4 py-3 text-sm">
            <ul class="list-disc pr-4 space-y-0.5">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    @yield('content')
</main>

@auth
    <x-heartbeat-script />
@endauth
<x-pwa-register-sw />
</body>
</html>
