@inherits LayoutComponentBase
@using Enciphered.Blazor.UIComponents

<SidebarProvider DefaultOpen="true">
    <Sidebar>
        <SidebarHeader>
            <div class="flex items-center gap-2 px-1 py-1.5 overflow-hidden">
                <div class="flex shrink-0 aspect-square size-8 items-center justify-center">
                    <img src="enci_white.svg" alt="Enciphered" class="size-5 hidden dark:block" />
                    <img src="enci.svg" alt="Enciphered" class="size-5 block dark:hidden" />
                </div>
                <span class="truncate font-semibold text-sm group-data-[state=collapsed]:group-data-[mobile=false]:hidden">Enciphered UI</span>
            </div>
        </SidebarHeader>

        <SidebarContent>
            <SidebarGroup>
                <SidebarGroupLabel Label="Navigation" />
                <SidebarGroupContent>
                    <SidebarMenuItem Href="/" Tooltip="Home">
                        <Icon>
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
                                 fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
                                <polyline points="9 22 9 12 15 12 15 22" />
                            </svg>
                        </Icon>
                        <ChildContent>Home</ChildContent>
                    </SidebarMenuItem>
                    <SidebarMenuItem Href="/counter" Tooltip="Counter">
                        <Icon>
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
                                 fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <rect width="18" height="18" x="3" y="3" rx="2" ry="2" />
                                <line x1="12" x2="12" y1="8" y2="16" />
                                <line x1="8" x2="16" y1="12" y2="12" />
                            </svg>
                        </Icon>
                        <ChildContent>Counter</ChildContent>
                    </SidebarMenuItem>
                    <SidebarMenuItem Href="/weather" Tooltip="Weather">
                        <Icon>
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
                                 fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z" />
                            </svg>
                        </Icon>
                        <ChildContent>Weather</ChildContent>
                    </SidebarMenuItem>
                    <SidebarMenuItem Href="/forms" Tooltip="Forms">
                        <Icon>
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
                                 fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
                                <path d="M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z" />
                            </svg>
                        </Icon>
                        <ChildContent>Forms</ChildContent>
                    </SidebarMenuItem>
                    <SidebarMenuItem Href="/cards" Tooltip="Cards">
                        <Icon>
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
                                 fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <rect width="18" height="18" x="3" y="3" rx="2" />
                                <path d="M3 9h18" />
                            </svg>
                        </Icon>
                        <ChildContent>Cards</ChildContent>
                    </SidebarMenuItem>
                </SidebarGroupContent>
            </SidebarGroup>
        </SidebarContent>

        <SidebarFooter>
            <div class="group-data-[state=collapsed]:group-data-[mobile=false]:hidden">
                <SidebarSeparator />
                <div class="px-3 py-2 text-xs text-sidebar-foreground/50 truncate">
                    &copy; 2026 Enciphered
                </div>
            </div>
        </SidebarFooter>
    </Sidebar>

    <SidebarInset>
        <header class="flex h-14 items-center gap-2 border-b border-border px-4">
            <SidebarTrigger Class="md:hidden" />
            <h1 class="text-sm font-medium">Demo App</h1>
            <div class="ml-auto">
                <ThemeToggle />
            </div>
        </header>

        <div class="flex-1 p-4 md:p-6">
            @Body
        </div>
    </SidebarInset>
</SidebarProvider>