<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">

        <title>{{ config('app.name') }}</title>

        <link rel="icon" href="data:,">
        @vite(['resources/css/app.css', 'resources/js/app.js'])
    </head>
    <body>
        <div class="d-flex">
            <nav class="sidebar p-3" style="width: 260px;">
                <a href="/" class="d-block text-center fw-bold text-danger mb-4 text-decoration-none">
                    {{ config('app.name') }}
                </a>

                @auth
                    @if(auth()->user()->isSuperAdmin())
                        @include('layouts.partials.sidebar-super-admin')
                    @elseif(auth()->user()->isAdminDesa())
                        @include('layouts.partials.sidebar-admin-desa')
                    @endif
                @endauth
            </nav>

            <div class="flex-grow-1">
                <nav class="navbar navbar-expand navbar-light bg-white border-bottom px-4">
                    <div class="ms-auto d-flex align-items-center gap-3">
                        <span class="text-muted small">{{ auth()->user()->name ?? '' }}</span>
                        <form method="POST" action="{{ route('logout') }}">
                            @csrf
                            <button type="submit" class="btn btn-sm btn-outline-danger">Logout</button>
                        </form>
                    </div>
                </nav>

                <main class="p-4">
                    @isset($header)
                        <div class="mb-4">{{ $header }}</div>
                    @endisset

                    @if (session('success'))
                        <div class="alert alert-success">{{ session('success') }}</div>
                    @endif

                    {{ $slot }}
                </main>
            </div>
        </div>

        @stack('scripts')
    </body>
</html>
