@using RackPeek.Domain
@inherits LayoutComponentBase
<div class="min-h-screen bg-zinc-950 text-zinc-200 font-mono"
     data-testid="app-root">

    <header class="flex items-center justify-between p-4 border-b border-zinc-800 bg-zinc-900"
            data-testid="app-header">
        <NavLink href=""
                 data-testid="brand-link"
                 class="hover:text-emerald-400"
                 activeClass="text-emerald-400 font-semibold">

            <div class="flex items-center gap-3"
                 data-testid="brand-text">

                <span class="text-xl font-bold text-emerald-400 tracking-wider">
                    rackpeek
                </span>

                <span class="text-[10px]
                     text-zinc-500
                     tracking-wide">
                    @RpkConstants.Version
                </span>

            </div>
        </NavLink>

        <div class="flex items-center gap-6">
            @if (RpkConstants.HasGitServices)
            {
                <GitStatusIndicator/>
            }

            <nav class="space-x-6 text-sm" data-testid="main-nav">

                <NavLink href=""
                         Match="NavLinkMatch.All"
                         data-testid="nav-home"
                         class="hover:text-emerald-400"
                         activeClass="text-emerald-400 font-semibold">
                    Home
                </NavLink>

                <NavLink href="cli"
                         class="hover:text-emerald-400"
                         activeClass="text-emerald-400 font-semibold"
                         data-testid="nav-cli">
                    CLI
                </NavLink>

                <NavLink href="yaml"
                         class="hover:text-emerald-400"
                         activeClass="text-emerald-400 font-semibold"
                         data-testid="nav-yaml">
                    Yaml
                </NavLink>

                <NavLink href="hardware/tree"
                         class="hover:text-emerald-400"
                         activeClass="text-emerald-400 font-semibold"
                         data-testid="nav-hardware">
                    Hardware
                </NavLink>

                <NavLink href="systems/list"
                         class="hover:text-emerald-400"
                         activeClass="text-emerald-400 font-semibold"
                         data-testid="nav-systems">
                    Systems
                </NavLink>

                <NavLink href="services/list"
                         class="hover:text-emerald-400"
                         activeClass="text-emerald-400 font-semibold"
                         data-testid="nav-services">
                    Services
                </NavLink>

                <NavLink href="docs"
                         class="hover:text-emerald-400"
                         activeClass="text-emerald-400 font-semibold"
                         data-testid="nav-docs">
                    Docs
                </NavLink>



            </nav>
        </div>
    </header>

    <main class="p-6" data-testid="page-content">
        @Body
    </main>

</div>