App Shell

@props([
    'title' => 'Overview',
    'org' => 'Northwind',
    'user' => null,
    'nav' => null,
    'shortcuts' => null,
])

@php
    $user ??= ['name' => 'Avery Quinn', 'email' => 'avery@northwind.io', 'initials' => 'AQ'];

    $nav ??= [
        [
            'heading' => 'Workspace',
            'items' => [
                ['label' => 'Overview', 'icon' => 'grid', 'href' => '#', 'current' => true, 'kbd' => 'G O'],
                ['label' => 'Inbox', 'icon' => 'inbox', 'href' => '#', 'badge' => '8', 'kbd' => 'G I'],
                ['label' => 'Deployments', 'icon' => 'rocket', 'href' => '#', 'kbd' => 'G D'],
                ['label' => 'Analytics', 'icon' => 'chart', 'href' => '#', 'kbd' => 'G A'],
            ],
        ],
        [
            'heading' => 'Resources',
            'items' => [
                ['label' => 'Team', 'icon' => 'users', 'href' => '#'],
                ['label' => 'Storage', 'icon' => 'database', 'href' => '#'],
                ['label' => 'Settings', 'icon' => 'settings', 'href' => '#'],
            ],
        ],
    ];

    // Top-bar command palette hint rows. Each is a label plus a sequence of keys.
    $shortcuts ??= [
        ['label' => 'Search', 'keys' => ['⌘', 'K']],
        ['label' => 'Go to', 'keys' => ['G', 'then', 'D']],
        ['label' => 'New', 'keys' => ['C']],
    ];

    // Trusted, developer-authored icon paths rendered inside menu buttons (escaped
    // output would mangle the SVG markup). Never feed user input through this map.
    $icons = [
        'grid' => '<rect width="7" height="7" x="3" y="3" rx="1"/><rect width="7" height="7" x="14" y="3" rx="1"/><rect width="7" height="7" x="14" y="14" rx="1"/><rect width="7" height="7" x="3" y="14" rx="1"/>',
        'inbox' => '<polyline points="22 12 16 12 14 15 10 15 8 12 2 12"/><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/>',
        'rocket' => '<path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"/><path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"/><path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"/><path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"/>',
        'chart' => '<path d="M3 3v16a2 2 0 0 0 2 2h16"/><path d="M18 17V9"/><path d="M13 17V5"/><path d="M8 17v-3"/>',
        'users' => '<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>',
        'database' => '<ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M3 5V19A9 3 0 0 0 21 19V5"/><path d="M3 12A9 3 0 0 0 21 12"/>',
        'settings' => '<path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/>',
    ];

    // Same groups as $nav, with each item's icon key resolved to raw SVG shape
    // markup, so the mobile sidebar part can render icons without knowing this
    // page's icon map.
    $mobileNav = collect($nav)->map(fn ($group) => [
        'heading' => $group['heading'],
        'items' => collect($group['items'])->map(fn ($item) => [
            ...$item,
            'icon' => $icons[$item['icon']] ?? null,
        ])->all(),
    ])->all();
@endphp

<x-ui.section data-surface="admin" space="none" class="h-svh" {{ $attributes }}>
    <x-ui.skip-link />
    <div class="flex h-svh w-full overflow-hidden">
        {{-- Full-bleed, edge-to-edge collapsible sidebar. --}}
        <x-ui.sidebar class="max-md:hidden">
            <x-ui.sidebar.header x-bind:class="expanded ? 'justify-between' : 'justify-center'">
                <a href="#" x-show="expanded" class="flex min-w-0 items-center gap-2">
                    <span class="flex size-8 shrink-0 items-center justify-center rounded-md bg-primary text-sm font-semibold text-primary-foreground" aria-hidden="true">N</span>
                    <span class="truncate text-sm font-semibold leading-tight">{{ __($org) }}</span>
                </a>
                <x-ui.sidebar.trigger class="shrink-0" />
            </x-ui.sidebar.header>

            <x-ui.sidebar.content>
                @foreach ($nav as $group)
                    <x-ui.sidebar.group>
                        <x-ui.sidebar.group-label>{{ __($group['heading']) }}</x-ui.sidebar.group-label>
                        <x-ui.sidebar.menu>
                            @foreach ($group['items'] as $item)
                                <x-ui.sidebar.menu-item>
                                    <x-ui.sidebar.menu-button :href="$item['href']" :active="$item['current'] ?? false" x-bind:class="expanded || 'justify-center'" :title="__($item['label'])">
                                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">{!! $icons[$item['icon']] ?? '' !!}</svg>
                                        <span x-show="expanded" class="truncate">{{ __($item['label']) }}</span>
                                        @isset($item['badge'])
                                            <x-ui.badge variant="secondary" x-show="expanded" class="ms-auto">{{ $item['badge'] }}</x-ui.badge>
                                        @elseif (! empty($item['kbd']))
                                            <x-ui.kbd x-show="expanded" class="ms-auto">{{ $item['kbd'] }}</x-ui.kbd>
                                        @endisset
                                    </x-ui.sidebar.menu-button>
                                </x-ui.sidebar.menu-item>
                            @endforeach
                        </x-ui.sidebar.menu>
                    </x-ui.sidebar.group>
                @endforeach
            </x-ui.sidebar.content>

            <x-ui.sidebar.footer>
                <x-ui.sidebar.separator />
                <div class="flex items-center gap-2 rounded-md p-2" x-bind:class="expanded || 'justify-center'">
                    <x-ui.avatar size="sm" :fallback="$user['initials']" :alt="$user['name']" />
                    <span x-show="expanded" class="flex min-w-0 flex-col">
                        <span class="truncate text-sm font-medium leading-tight">{{ $user['name'] }}</span>
                        <span class="truncate text-xs text-muted-foreground">{{ $user['email'] }}</span>
                    </span>
                </div>
            </x-ui.sidebar.footer>
        </x-ui.sidebar>

        {{-- Full-viewport main column: breadcrumb navbar with shortcut hints + skeleton grid. --}}
        <x-ui.sidebar.inset id="main-content" class="min-w-0">
            {{-- Mobile navigation: the desktop sidebar is hidden below `md`, so a hamburger opens the full nav in a start-side sheet. --}}
            <x-ui.sidebar.mobile :nav="$mobileNav" :label="$org" id="app-shell-02-mobile-nav" />

            <header class="flex h-16 shrink-0 items-center gap-4 border-b border-border bg-background/95 px-4 backdrop-blur supports-[backdrop-filter]:bg-background/60 sm:px-6">
                <x-ui.breadcrumb class="min-w-0 flex-1">
                    <x-ui.breadcrumb.list>
                        <x-ui.breadcrumb.item class="max-sm:hidden">
                            <x-ui.breadcrumb.link href="#">{{ __($org) }}</x-ui.breadcrumb.link>
                        </x-ui.breadcrumb.item>
                        <x-ui.breadcrumb.separator class="max-sm:hidden" />
                        <x-ui.breadcrumb.item>
                            <x-ui.breadcrumb.page>{{ __($title) }}</x-ui.breadcrumb.page>
                        </x-ui.breadcrumb.item>
                    </x-ui.breadcrumb.list>
                </x-ui.breadcrumb>

                {{-- Keyboard-shortcut hint cluster. --}}
                <div class="hidden items-center gap-4 lg:flex">
                    @foreach ($shortcuts as $shortcut)
                        <span class="flex items-center gap-2 text-xs text-muted-foreground">
                            <span>{{ __($shortcut['label']) }}</span>
                            @foreach ($shortcut['keys'] as $key)
                                @if ($key === 'then')
                                    <span class="text-muted-foreground">{{ __('then') }}</span>
                                @else
                                    <x-ui.kbd>{{ $key }}</x-ui.kbd>
                                @endif
                            @endforeach
                        </span>
                    @endforeach
                </div>

                <x-ui.button variant="outline" size="sm" class="ms-auto whitespace-nowrap shrink-0">
                    <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
                    {{ __('Search') }}
                    <x-ui.kbd class="ms-2">⌘K</x-ui.kbd>
                </x-ui.button>
            </header>

            <div data-slot="app-shell-content" class="flex-1 overflow-auto p-4 sm:p-6 lg:p-8">
                @if (trim($slot) !== '')
                    {{ $slot }}
                @else
                    <div class="flex flex-col gap-6">
                        <div class="flex flex-col justify-between gap-4 sm:flex-row sm:items-center">
                            <div>
                                <h1 class="text-2xl font-bold tracking-tight">{{ __($title) }}</h1>
                                <p class="mt-2 text-sm text-muted-foreground">{{ __('Loading the latest activity across your workspace.') }}</p>
                            </div>
                            <x-ui.badge variant="outline" class="w-fit shrink-0 gap-2">
                                <span class="size-2 rounded-full bg-success" aria-hidden="true"></span>
                                {{ __('All systems operational') }}
                            </x-ui.badge>
                        </div>

                        {{-- Skeleton KPI row. --}}
                        <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
                            @for ($i = 0; $i < 4; $i++)
                                <x-ui.card aria-busy="true">
                                    <x-ui.card.header class="gap-4">
                                        <x-ui.skeleton class="h-3 w-20" />
                                        <x-ui.skeleton class="h-7 w-28" />
                                        <x-ui.skeleton class="h-3 w-16" />
                                    </x-ui.card.header>
                                </x-ui.card>
                            @endfor
                        </div>

                        {{-- Skeleton chart + side list. --}}
                        <div class="grid gap-6 lg:grid-cols-[2fr_1fr]">
                            <x-ui.card aria-busy="true">
                                <x-ui.card.header class="gap-4">
                                    <x-ui.skeleton class="h-4 w-40" />
                                    <x-ui.skeleton class="h-3 w-56" />
                                </x-ui.card.header>
                                <x-ui.card.content>
                                    <div class="flex h-64 items-end gap-2">
                                        @foreach ([45, 70, 55, 85, 60, 95, 75, 50, 80, 65, 90, 70] as $h)
                                            <x-ui.skeleton class="flex-1 rounded-b-none" style="height: {{ $h }}%" />
                                        @endforeach
                                    </div>
                                </x-ui.card.content>
                            </x-ui.card>

                            <x-ui.card aria-busy="true">
                                <x-ui.card.header class="gap-4">
                                    <x-ui.skeleton class="h-4 w-32" />
                                    <x-ui.skeleton class="h-3 w-44" />
                                </x-ui.card.header>
                                <x-ui.card.content class="flex flex-col gap-4">
                                    @for ($i = 0; $i < 5; $i++)
                                        <div class="flex items-center gap-4">
                                            <x-ui.skeleton class="size-9 shrink-0 !rounded-full" />
                                            <div class="flex min-w-0 flex-1 flex-col gap-2">
                                                <x-ui.skeleton class="h-3 w-3/5" />
                                                <x-ui.skeleton class="h-3 w-2/5" />
                                            </div>
                                            <x-ui.skeleton class="h-5 w-12 shrink-0" />
                                        </div>
                                    @endfor
                                </x-ui.card.content>
                            </x-ui.card>
                        </div>

                        {{-- Skeleton table block. --}}
                        <x-ui.card aria-busy="true">
                            <x-ui.card.header class="gap-4">
                                <x-ui.skeleton class="h-4 w-36" />
                            </x-ui.card.header>
                            <x-ui.card.content class="flex flex-col gap-4">
                                @for ($i = 0; $i < 6; $i++)
                                    <div class="flex items-center gap-4">
                                        <x-ui.skeleton class="h-3 w-1/4" />
                                        <x-ui.skeleton class="h-3 w-1/3" />
                                        <x-ui.skeleton class="ms-auto h-3 w-16" />
                                    </div>
                                @endfor
                            </x-ui.card.content>
                        </x-ui.card>
                    </div>
                @endif
            </div>
        </x-ui.sidebar.inset>
    </div>
</x-ui.section>