@inherits LayoutComponentBase
@using Blazored.Toast
@using Microsoft.AspNetCore.Components.Authorization

<header class="top-bar">
    <a href="/" class="brand">
        <svg class="brand-mark" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg">
            <path d="M70,25 C65,18 58,15 50,15 C30,15 15,30 15,50 C15,70 30,85 50,85 C58,85 65,82 70,75 L62,68 C58,72 54,74 50,74 C37,74 27,63 27,50 C27,37 37,26 50,26 C54,26 58,28 62,32 L70,25 Z" fill="#0096c7" />
            <circle cx="85" cy="50" r="8" fill="#4dabff" opacity="0.9" />
            <circle cx="75" cy="80" r="5" fill="#4dabff" opacity="0.6" />
            <circle cx="75" cy="20" r="5" fill="#4dabff" opacity="0.6" />
        </svg>

        <div class="text-column">
            <span class="brand-main">Lite<span class="brand-accent">Charms</span></span>
            <span class="payoff-line">Shop Administration &amp; Monitoring</span>
        </div>
    </a>

    <TopBarAuthstateView />
</header>

<CascadingAuthenticationState>
    <AuthorizeView>
        <Authorized>
            <NavShelf IsOpen="isShelfExpanded" IsOpenChanged="OnShelfStateChanged" @rendermode="InteractiveServer" />
        </Authorized>
    </AuthorizeView>
</CascadingAuthenticationState>

<CascadingAuthenticationState>
    <div class="page-wrapper @(isShelfExpanded ? "shifted-canvas" : "")">
        <AuthorizeView>
            <Authorized>
                <main class="content-body">
                    @Body
                </main>
            </Authorized>
            <NotAuthorized>
                <Login />
            </NotAuthorized>
        </AuthorizeView>
    </div>
</CascadingAuthenticationState>

<BlazoredToasts />

@code {
    private bool isShelfExpanded { get; set; } = false;

    private void OnShelfStateChanged(bool newState)
    {
        isShelfExpanded = newState;

        // This forces Blazor to re-evaluate the DOM, instantly applying
        // the "shelf-open" and "shifted-canvas" CSS utility classes.
        StateHasChanged();
    }
}