<template>
    <SidebarTemplate>
        <div class="content-l">
            <h2>Kubooboo</h2>
            <div class="nav">
                <NuxtLink class="resources" to="/account/inspect/nodes">Nodes</NuxtLink>
                <NuxtLink class="resources" to="/account/inspect/ingresses">Ingresses</NuxtLink>
                <NuxtLink class="resources" to="/account/inspect/services">Services</NuxtLink>
                <NuxtLink class="resources" to="/account/inspect/deployments">Deployments</NuxtLink>
                <NuxtLink class="resources" to="/account/inspect/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>
    </SidebarTemplate>
</template>

<script setup lang="ts">
import SidebarTemplate from './SidebarTemplate.vue';

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('/account/inspect/nodes'))
    {
        return false;
    }
    return true;
});
</script>