<script lang="ts">
    export let selected;
    export let orgid;

    let hostsstyle = (selected == "hosts" ? "dark:bg-slate-600 bg-slate-200" : "dark:hover:bg-slate-600 hover:bg-slate-200");
    let lighthousestyle = (selected == "lighthouses" ? "dark:bg-slate-600 bg-slate-200" : "dark:hover:bg-slate-600 hover:bg-slate-200");
    let relaysstyle = (selected == "relays" ? "dark:bg-slate-600 bg-slate-200" : "dark:hover:bg-slate-600 hover:bg-slate-200");
    let rolesstyle = (selected == "roles" ? "dark:bg-slate-600 bg-slate-200" : "dark:hover:bg-slate-600 hover:bg-slate-200");
</script>

<div class="min-h-screen flex flex-row overflow-y-hidden">
    <div class="max-h flex flex-col w-56 overflow-hidden border-r-2 border-slate-500">
        <ul class="flex flex-col py-4">
            <li>
                <a href="/org/{orgid}/hosts" class="{hostsstyle} mt-2 flex flex-row items-center h-12 transition">
                    <span class="ml-10 text-sm font-medium">Hosts</span>
                </a>
            </li>

            <li>
                <a href="/org/{orgid}/lighthouses" class="{lighthousestyle} mt-2 flex flex-row items-center h-12 dark:hover:bg-slate-600 hover:bg-slate-200 transition">
                    <span class="ml-10 text-sm font-medium">Lighthouses</span>
                </a>
            </li>

            <li>
                <a href="/org/{orgid}/relays" class="{relaysstyle} mt-2 flex flex-row items-center h-12 dark:hover:bg-slate-600 hover:bg-slate-200 transition">
                    <span class="ml-10 text-sm font-medium">Relays</span>
                </a>
            </li>

            <li>
                <a href="/org/{orgid}/roles" class="{rolesstyle} mt-2 flex flex-row items-center h-12 dark:hover:bg-slate-600 hover:bg-slate-200 transition">
                    <span class="ml-10 text-sm font-medium">Roles</span>
                </a>
            </li>

        </ul>
    </div>

    <div class="overflow-hidden w-full min-w-screen min-h-screen ml-5 mr-5 m-2">
        <slot></slot>
    </div>
</div>