{{--
    Authenticated application shell.

    A fixed dark rail on the left, a light sticky topbar over the content, and a
    gray canvas the cards sit on. The rail carries the brand and the current
    location; the topbar carries search and identity; the canvas carries the
    work.

    Pages use it as:

        @extends('layouts.app')
        @section('title', 'Assets')
        @section('content') ... @endsection
--}}
<!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() }}">
    <meta name="robots" content="noindex, nofollow">
    {{-- Tints the browser chrome on mobile to match the rail. --}}
    <meta name="theme-color" content="#111827">

    <title>@hasSection('title')@yield('title') &middot; @endif{{ setting('application_name', config('app.name')) }}</title>

    <link rel="icon" href="{{ asset('favicon.ico') }}" sizes="any">

    @vite(['resources/scss/app.scss', 'resources/js/app.js'])

    @stack('head')
</head>
<body>
    {{--
        The rail is a sibling of the content column, not a child of it: above lg
        it is `position: fixed`, and `.ams-shell` reserves its width with a left
        pad. Below lg the same element is Bootstrap's offcanvas drawer.
    --}}
    @include('partials.sidebar')

    <div class="ams-shell">
        @include('partials.topbar')

        <main class="ams-main">
            {{--
                Listings run to the full content width; forms and detail screens
                opt into a narrower column with

                    @section('container-class', 'ams-container--narrow')
            --}}
            <div class="ams-container @yield('container-class')">
                @include('partials.alerts')

                @yield('content')
            </div>
        </main>
    </div>

    <x-confirm-modal />

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