@* Sidebar header *@
<div class="flex h-14 items-center border-b border-sidebar-border px-4">
    <button type="button"
            class="flex items-center gap-2 font-semibold text-sidebar-foreground rounded-md transition-colors hover:bg-sidebar-accent px-1 py-1"
            title="Toggle sidebar"
            @onclick="HandleToggle">
        <img src="enci_white.svg" alt="Logo" class="h-6 w-6 shrink-0 transition-transform duration-300" />
        @if (!Collapsed)
        {
            <span class="text-sm tracking-tight">Enciphered</span>
        }
    </button>
</div>

@* Navigation *@
<div class="flex flex-col gap-1 p-3">
    @if (!Collapsed)
    {
        <p class="mb-1 px-2 text-xs font-medium uppercase tracking-wider text-muted-foreground">
            Navigation
        </p>
    }

    <NavLink class="@NavLinkClass" href="" Match="NavLinkMatch.All"
             ActiveClass="bg-sidebar-accent text-accent-foreground"
             @onclick="HandleNav"
             title="Home">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8" />
            <path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
        </svg>
        @if (!Collapsed)
        {
            <span>Home</span>
        }
    </NavLink>

    <NavLink class="@NavLinkClass" href="weather"
             ActiveClass="bg-sidebar-accent text-accent-foreground"
             @onclick="HandleNav"
             title="Weather">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 shrink-0" 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>
        @if (!Collapsed)
        {
            <span>Weather</span>
        }
    </NavLink>
</div>

@code {
    [Parameter] public bool Collapsed { get; set; }
    [Parameter] public EventCallback OnToggleSidebar { get; set; }
    [Parameter] public EventCallback OnNavigated { get; set; }

    private string NavLinkClass => Collapsed
        ? "nav-link group flex items-center justify-center rounded-md p-2 text-sm font-medium text-sidebar-foreground transition-colors hover:bg-sidebar-accent"
        : "nav-link group flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium text-sidebar-foreground transition-colors hover:bg-sidebar-accent";

    private async Task HandleToggle()
    {
        if (OnToggleSidebar.HasDelegate)
            await OnToggleSidebar.InvokeAsync();
    }

    private async Task HandleNav()
    {
        if (OnNavigated.HasDelegate)
            await OnNavigated.InvokeAsync();
    }
}