<template>
    <div class="account-page">
        <div class="left-center footer">
            <img class="logo" src="/assets/transparent_logo.png" alt="">
            <div>
                <h3>Kubooboo</h3>
                <div class="left-center">
                    <NuxtLink to="/account/inspect/nodes/_all">Inspect</NuxtLink>
                    <NuxtLink v-if="false" to="/account/monitorings/nodes">Monitorings</NuxtLink>
                    <NuxtLink to="/account/settings/password">Settings</NuxtLink>
                    <p class="pointer" @click="logout()">Logout</p>
                </div>
            </div>
        </div>
        <NuxtPage></NuxtPage>
    </div>
</template>

<script setup lang="ts">
function logout()
{
    useCookie('session').value = null;
    useRouter().push('/');
}
</script>

<style scoped>
.account-page {
    height: 100%;
    display: grid;
    grid-template-rows: auto 1fr;
}
.footer {
    background-color: var(--tile-color);
    padding: 0.5rem;
    border-bottom: 1px solid #cddaff;
}
.logo {
    width: 2.5rem;
    height: 2.5rem;
}
</style>