<template>
    <nav class="sidebar">
        <div class="content-l">
            <h2>Kubooboo</h2>
            <div class="nav">
                <NuxtLink class="resources" to="/dashboard/nodes">Nodes</NuxtLink>
                <NuxtLink class="resources" to="/dashboard/ingresses">Ingresses</NuxtLink>
                <NuxtLink class="resources" to="/dashboard/services">Services</NuxtLink>
                <NuxtLink class="resources" to="/dashboard/pods">Pods</NuxtLink>
            </div>
            <div class="divider" :class="{ hide: !inNamespaceScopedResource }"></div>
            <div :class="{ hide: !inNamespaceScopedResource }">
                <div class="namespace" :class="{ active: currentNamespace === undefined }" @click="() => namespaceStore.selectNamespace(undefined)">
                    <p>Alle</p>
                </div>
                <div class="namespace" v-for="namespace in namespaces" @click="() => namespaceStore.selectNamespace(namespace)" :class="{ active: namespace.metadata?.name === currentNamespace?.metadata?.name }">
                    <p v-if="namespace.metadata">{{ namespace.metadata.name }}</p>
                </div>
            </div>
        </div>
        <div class="left-center" v-if="user" @click="() => accountPopup.open()">
            <UiIcon>account_circle</UiIcon>
            <p>{{ user.username }}</p>
        </div>
    </nav>
    <AccountPopup ref="accountPopup"></AccountPopup>
</template>

<script setup lang="ts">
import { useNamespaceStore } from '#imports';

const namespaceStore = useNamespaceStore();

const namespaces = computed(namespaceStore.getNamespaces);

const currentNamespace = computed(namespaceStore.getCurrentNamespace)

const user = getUser();

const accountPopup = ref();

const inNamespaceScopedResource: ComputedRef<boolean> = computed(() => {
    if(useRoute().fullPath.startsWith('/dashboard/nodes'))
    {
        return false;
    }
    return true;
});
</script>

<style scoped>
.sidebar {
    padding: 0.75rem;
    background-color: rgb(29, 29, 29);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
    height: 100%;
}
.sidebar * {
    color: white;
}
.namespace, .resources {
    padding: 0.5rem;
    border-radius: 0.25rem;
}
.namespace.active, .resources.router-link-active {
    background-color: var(--primary-color)
}
.namespace.active *, .resources.router-link-active {
    color: white;
}
.divider {
    height: 1px;
    background-color: lightgray;
}
.nav > * {
    display: block;
    text-decoration: none;
}
.hide {
    visibility: hidden;
}
</style>