@php
    $examples = [
        'Top app bars' => <<<'BLADE'
            <div class="grid w-full gap-4 [&>*]:overflow-hidden [&>*]:rounded-corner-lg [&>*]:border [&>*]:border-outline-variant">
                <div>
                    <x-app-bar title="Shares" :sticky="false">
                        <x-slot:navigation><x-button icon="menu" tooltip="Open navigation" /></x-slot:navigation>
                        <x-slot:actions>
                            <x-button icon="search" tooltip="Search" />
                            <x-button icon="more_vert" tooltip="More" />
                        </x-slot:actions>
                    </x-app-bar>
                </div>

                <div>
                    <x-app-bar variant="center" title="holiday-photos.zip" subtitle="248 MB · expires in 3 days" :sticky="false">
                        <x-slot:navigation><x-button icon="arrow_back" tooltip="Back" /></x-slot:navigation>
                        <x-slot:actions><x-button icon="share" tooltip="Share" /></x-slot:actions>
                    </x-app-bar>
                </div>

                <div>
                    <x-app-bar variant="medium" title="Recipients" subtitle="3 people" :sticky="false">
                        <x-slot:navigation><x-button icon="arrow_back" tooltip="Back" /></x-slot:navigation>
                        <x-slot:actions><x-button icon="person_add" tooltip="Add recipient" /></x-slot:actions>
                    </x-app-bar>
                </div>

                <div>
                    <x-app-bar variant="large" title="Settings" :sticky="false">
                        <x-slot:navigation><x-button icon="arrow_back" tooltip="Back" /></x-slot:navigation>
                    </x-app-bar>
                </div>

                <div class="!overflow-visible">
                    <x-app-bar variant="search" :sticky="false" class="rounded-corner-lg">
                        <x-slot:navigation><x-button icon="menu" tooltip="Open navigation" /></x-slot:navigation>
                        <x-search placeholder="Search shares" docked />
                        <x-slot:actions>
                            <span class="mx-2 grid size-8 place-items-center rounded-corner-full bg-primary-container type-label-lg text-on-primary-container">AR</span>
                        </x-slot:actions>
                    </x-app-bar>
                </div>
            </div>
            BLADE,
        'Toolbars' => <<<'BLADE'
            <div class="flex w-full flex-wrap items-center gap-6">
                <x-toolbar label="Formatting">
                    <x-button icon="format_bold" tooltip="Bold" :selected="true" />
                    <x-button icon="format_italic" tooltip="Italic" :selected="false" />
                    <x-button icon="format_underlined" tooltip="Underline" :selected="false" />
                    <x-button icon="link" tooltip="Link" />
                </x-toolbar>

                <x-toolbar label="Share actions" vibrant>
                    <x-button icon="content_copy" tooltip="Copy link" />
                    <x-button icon="qr_code_2" tooltip="QR code" />
                    <x-button icon="mail" tooltip="Email" />
                    <x-slot:fab><x-fab icon="add" tooltip="New share" color="secondary" /></x-slot:fab>
                </x-toolbar>

                <x-toolbar label="View" vertical>
                    <x-button icon="grid_view" tooltip-right="Grid" :selected="true" />
                    <x-button icon="view_list" tooltip-right="List" :selected="false" />
                    <x-button icon="zoom_in" tooltip-right="Zoom in" />
                </x-toolbar>

                <div class="w-full overflow-hidden rounded-corner-lg border border-outline-variant">
                    <x-toolbar variant="docked" label="Selection">
                        <x-button icon="download" tooltip="Download" />
                        <x-button icon="share" tooltip="Share" />
                        <x-button icon="drive_file_move" tooltip="Move" />
                        <x-button icon="delete" tooltip="Delete" />
                    </x-toolbar>
                </div>

                <div class="w-full overflow-hidden rounded-corner-lg border border-outline-variant">
                    <x-toolbar variant="docked" label="Editing">
                        <x-button icon="check_box" tooltip="Select" />
                        <x-button icon="brush" tooltip="Draw" />
                        <x-button icon="mic" tooltip="Record" />
                        <x-button icon="image" tooltip="Add image" />
                        <x-slot:fab><x-fab icon="add" tooltip="New note" color="secondary" /></x-slot:fab>
                    </x-toolbar>
                </div>
            </div>
            BLADE,
        'Primary tabs' => <<<'BLADE'
            <div class="w-full space-y-8">
                <x-tabs :tabs="[['name' => 'files', 'label' => 'Files'], ['name' => 'recipients', 'label' => 'Recipients', 'badge' => 3], ['name' => 'activity', 'label' => 'Activity'], ['name' => 'settings', 'label' => 'Settings', 'disabled' => true]]">
                    <x-tab name="files">Three files, 248 MB.</x-tab>
                    <x-tab name="recipients">Anna, Ben and Chiara.</x-tab>
                    <x-tab name="activity">Downloaded twice today.</x-tab>
                </x-tabs>

                <x-tabs stacked selected="photos" :tabs="[['name' => 'all', 'label' => 'All', 'icon' => 'folder'], ['name' => 'photos', 'label' => 'Photos', 'icon' => 'photo'], ['name' => 'videos', 'label' => 'Videos', 'icon' => 'movie']]">
                    <x-tab name="all">Everything shared with you.</x-tab>
                    <x-tab name="photos">Only photos.</x-tab>
                    <x-tab name="videos">Only videos.</x-tab>
                </x-tabs>
            </div>
            BLADE,
        'Secondary and scrollable tabs' => <<<'BLADE'
            <div class="w-full space-y-8">
                <x-tabs variant="secondary" :tabs="[['name' => 'overview', 'label' => 'Overview'], ['name' => 'security', 'label' => 'Security', 'icon' => 'lock'], ['name' => 'billing', 'label' => 'Billing']]">
                    <x-tab name="overview">An overview of the account.</x-tab>
                    <x-tab name="security">Passwords and two-factor sign-in.</x-tab>
                    <x-tab name="billing">Plan and invoices.</x-tab>
                </x-tabs>

                <div class="max-w-sm">
                    <x-tabs scrollable :tabs="collect(['January', 'February', 'March', 'April', 'May', 'June', 'July'])->map(fn ($month) => ['name' => strtolower($month), 'label' => $month])->all()">
                        <x-tab name="january">January's shares.</x-tab>
                    </x-tabs>
                </div>
            </div>
            BLADE,
        'Section navigation, account menu and theme toggles' => <<<'BLADE'
            <div class="w-full space-y-8">
                <x-section-nav :items="[
                    ['title' => 'Profile', 'icon' => 'person', 'url' => '#bars', 'active' => true],
                    ['title' => 'Security', 'icon' => 'lock', 'url' => '#bars'],
                    ['title' => 'Notifications', 'icon' => 'notifications', 'url' => '#bars', 'badge' => 2],
                    ['title' => 'Billing', 'icon' => 'credit_card', 'url' => '#bars'],
                ]" no-wire-navigate />

                <div class="flex flex-wrap items-center gap-4">
                    <x-account-menu name="Andreas Reinhold" email="andreas@example.com">
                        <x-menu-item label="Settings" icon="settings" link="#bars" no-wire-navigate />
                        <x-slot:footer>
                            <x-menu-item label="Sign out" icon="logout" />
                        </x-slot:footer>
                    </x-account-menu>

                    <x-theme-toggle />
                    <x-theme-toggle mode="cycle" />
                    <x-theme-toggle mode="picker" />
                </div>
            </div>
            BLADE,
    ];
@endphp

<section id="bars" class="scroll-mt-24 space-y-6">
    <h2 class="type-headline-md">App bars, toolbars and tabs</h2>

    <p class="max-w-3xl type-body-md text-on-surface-variant">
        <code>&lt;x-app-bar&gt;</code>, <code>&lt;x-toolbar&gt;</code>, <code>&lt;x-tabs&gt;</code>, <code>&lt;x-tab&gt;</code>, <code>&lt;x-section-nav&gt;</code>, <code>&lt;x-account-menu&gt;</code> and <code>&lt;x-theme-toggle&gt;</code>.
    </p>

    @foreach ($examples as $title => $code)
        <x-showcase::example :$title :$code />
    @endforeach
</section>