@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>

        <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>
    </header>

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

</div>