@using Moonlight.Client.UI.Partials

@inherits LayoutComponentBase

<div class="relative isolate flex min-h-svh w-full h-screen max-lg:flex-col bg-gray-900 lg:bg-gray-950/80">
    <AppSidebar Layout="this"/>
    <AppHeader Layout="this" />

    <main class="h-full flex flex-1 flex-col lg:pb-5 lg:min-w-0 lg:pt-5 lg:pr-3.5 lg:pl-64">
        <div class="h-full grow p-6 lg:rounded-lg lg:p-10 lg:ring-1 lg:shadow-xs lg:bg-gray-900/80 lg:ring-white/10">
            <div class="h-full mx-auto max-w-7xl">
                <CascadingValue Value="this" IsFixed="true">
                    @Body
                </CascadingValue>
            </div>
        </div>
    </main>

</div>

<ToastLauncher/>
<ModalLauncher/>

<div id="blazor-error-ui" class="fixed bottom-0 left-0 w-full z-50">
    <div class="bg-error text-white p-4 flex flex-row justify-between items-center">
        <div class="flex items-center">
            <i class="icon-bomb text-lg text-white me-2"></i>
            <span>An unhandled error has occurred.</span>
        </div>
        <div>
            <a href="#" class="reload text-white underline mr-4">Reload</a>
            <a href="#" class="dismiss hidden">🗙</a>
        </div>
    </div>
</div>

@code
{
    // Mobile navigation
    public event Func<Task> OnStateChanged;
    public bool ShowMobileNavigation { get; private set; } = false;

    public async Task ToggleMobileNavigation()
    {
        ShowMobileNavigation = !ShowMobileNavigation;
        await OnStateChanged();
    }
}