@php
    $currentRoute = request()->route()->getName();
    $isCurrentRouteClass = 'bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100';
    $isNotCurrentRouteClass = 'text-gray-600 dark:text-gray-400';
@endphp

    <!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="dark">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    @hasSection('meta')
        @yield('meta')
    @else
        {!! seo($SEOData ?? null) !!}
    @endif
    <title>{{ $title ?? 'Page Title' }}</title>
    <script src="https://kit.fontawesome.com/866fd3d0ab.js" crossorigin="anonymous"></script>
    @googlefonts
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    @fluxAppearance
</head>
<body class="min-h-screen bg-bg-page antialiased">
<flux:header sticky class="bg-bg-surface h-18">
    <flux:sidebar.toggle class="lg:hidden" icon="bars-2" inset="left"/>

    <flux:brand href="/" name="EINUNDZWANZIG" class="max-lg:hidden dark:hidden">
        <img src="{{ asset('einundzwanzig-alpha.jpg') }}" alt="Logo" class="h-6 w-6">
    </flux:brand>
    <flux:brand href="/" name="EINUNDZWANZIG" class="max-lg:hidden! hidden dark:flex">
        <img src="{{ asset('einundzwanzig-alpha.jpg') }}" alt="Logo" class="h-6 w-6">
    </flux:brand>

    <flux:navbar class="-mb-px max-lg:hidden">
        @if(\App\Support\NostrAuth::check())
            <flux:navbar.item icon="rss" :href="route('association.news')"
                              :current="request()->routeIs('association.news')">
                News
            </flux:navbar.item>
            <flux:navbar.item icon="identification" :href="route('association.profile')"
                              :current="request()->routeIs('association.profile')">
                Mitgliederstatus
            </flux:navbar.item>
            <flux:navbar.item icon="gift" :href="route('association.benefits')"
                              :current="request()->routeIs('association.benefits')">
                Vorteile
            </flux:navbar.item>
            <flux:navbar.item icon="heart" :href="route('association.projectSupport')"
                              :current="request()->routeIs('association.projectSupport')">
                Projekt-Unterstützungen
            </flux:navbar.item>

            <flux:dropdown position="bottom">
                <flux:navbar.item icon:trailing="chevron-down">Admin</flux:navbar.item>

                <flux:navmenu>
                    <flux:navmenu.item :href="route('association.members.admin')"
                                       :current="request()->routeIs('association.members.admin')">Mitglieder
                    </flux:navmenu.item>
                </flux:navmenu>
            </flux:dropdown>
        @endif
    </flux:navbar>

    <flux:spacer/>

    <flux:navbar class="me-4">
        <flux:dropdown position="bottom" align="end" class="max-lg:hidden">
            <flux:navbar.item icon:trailing="information-circle">Info</flux:navbar.item>

            <flux:menu>
                <flux:menu.item href="https://einundzwanzig.space/kontakt/" target="_blank">Impressum</flux:menu.item>
            </flux:menu>
        </flux:dropdown>

        <livewire:auth-button location="navbar"/>
    </flux:navbar>
</flux:header>

<flux:sidebar sticky collapsible="mobile"
              class="lg:hidden bg-bg-surface border-r border-border-default">
    <flux:sidebar.header>
        <flux:sidebar.brand
            href="/"
            name="EINUNDZWANZIG"
        >
            <img src="{{ asset('einundzwanzig-alpha.jpg') }}" alt="Logo" class="h-6 w-6">
        </flux:sidebar.brand>

        <flux:sidebar.collapse
            class="in-data-flux-sidebar-on-desktop:not(in-data-flux-sidebar-collapsed-desktop):-mr-2"/>
    </flux:sidebar.header>

    <flux:sidebar.nav>
        <flux:sidebar.group>
            <livewire:auth-button location="sidebar"/>
        </flux:sidebar.group>

        <flux:sidebar.group heading="Mitgliedsbereich" class="grid">
            <flux:sidebar.item icon="rss" :href="route('association.news')"
                               :current="request()->routeIs('association.news')">News
            </flux:sidebar.item>
            <flux:sidebar.item icon="identification" :href="route('association.profile')"
                               :current="request()->routeIs('association.profile')">Meine Mitgliedschaft
            </flux:sidebar.item>
            <flux:sidebar.item icon="gift" :href="route('association.benefits')"
                               :current="request()->routeIs('association.benefits')">Vorteile
            </flux:sidebar.item>
            <flux:sidebar.item icon="heart" :href="route('association.projectSupport')"
                               :current="request()->routeIs('association.projectSupport')">Projekt-Unterstützungen
            </flux:sidebar.item>

            <flux:sidebar.group heading="Admin" class="grid">
                <flux:sidebar.item icon="users" :href="route('association.members.admin')"
                                   :current="request()->routeIs('association.members.admin')">Mitglieder
                </flux:sidebar.item>
            </flux:sidebar.group>

            <flux:sidebar.group heading="Info" class="grid">
                <flux:sidebar.item href="https://einundzwanzig.space/kontakt/" target="_blank">Impressum
                </flux:sidebar.item>
            </flux:sidebar.group>
        </flux:sidebar.group>
    </flux:sidebar.nav>
</flux:sidebar>

<flux:main>
    {{ $slot }}
</flux:main>

@persist('toast')
<flux:toast/>
@endpersist

@fluxScripts
@livewireScriptConfig
<script>
    if (!localStorage.getItem('flux.appearance')) {
        localStorage.setItem('flux.appearance', 'dark');
    }
    window.wnjParams = {
        position: 'bottom',
        accent: 'orange',
        startHidden: false,
        compactMode: false,
        disableOverflowFix: false,
    }
</script>
<script src="{{ asset('dist/window.nostr.min.js.js') }}"></script>
</body>
</html>
