<!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>
    @vite(['resources/scss/app.scss', 'resources/js/app.js'])
</head>
<body>
<div x-data="{ open: false }" class="d-flex min-vh-100">
    <!-- Sidebar -->
    <aside id="sidebar" class="sterna-sidebar p-3 d-flex flex-column" :class="{ 'is-open': open }">
        <div class="px-2 mb-4 text-center">
            <img src="{{ asset('images/sterna-logo.png') }}" alt="Стерна"
                 style="width:150px;max-width:100%;height:auto;">
        </div>
        <nav class="flex-grow-1">
            @foreach (config('navigation.'.auth()->user()->role->value, []) as $item)
                <x-sidebar-link :route="$item['route']" :icon="$item['icon']" :label="$item['label']" />
            @endforeach
        </nav>
    </aside>

    <!-- Backdrop for mobile -->
    <div x-show="open" x-cloak @click="open = false"
         class="position-fixed top-0 start-0 w-100 h-100"
         style="background:rgba(0,0,0,.3); z-index:1044;"></div>

    <!-- Main -->
    <div class="flex-grow-1 d-flex flex-column min-vw-0">
        <header class="sterna-topbar d-flex align-items-center justify-content-between px-3 py-2">
            <button class="btn btn-light border d-lg-none" @click="open = !open" aria-label="Мени" aria-controls="sidebar" :aria-expanded="open">
                <i class="bi bi-list"></i>
            </button>
            <div class="ms-auto"><x-user-menu /></div>
        </header>
        <main class="p-3 p-md-4 flex-grow-1">
            @isset($header){{ $header }}@endisset
            {{ $slot }}
        </main>
    </div>
</div>
</body>
</html>
