<template>
    <div class="sidebar content-l">
        <h2>Verifoo</h2>
        <div class="inner-sidebar">
            <div class="content-s">
                <NuxtLink class="sidebar-link" to="/">Home</NuxtLink>
                <NuxtLink class="sidebar-link" v-for="realm in realms" :to="'/realms/' + realm.key + '/home'">{{ realm.name }}</NuxtLink>
            </div>
            <div class="content-s">
                <UiButton icon="add" reverse @click="addRealm">Create</UiButton>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import type {Realm} from "~/realm/Realm";
import {Popup, PopupSize, usePopup} from "~/components/ui/popup/Popup";
import RealmAdd from "~/realm/RealmAdd.vue";

defineProps<{
    realms: Realm[]
}>()

function addRealm()
{
    usePopup().open(Popup.component(RealmAdd).setConfig({ heading: 'Add Realm', size: PopupSize.MEDIUM }));
}
</script>

<style scoped>
.sidebar {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    padding: 1rem 2rem;
    background-color: #f1f1f1;
    align-content: flex-start;
    border-right: 1px solid #dfdfdf;
}

.sidebar-link {
    padding: 0.5rem;
    border-radius: 0.25rem;
}

.sidebar-link.router-link-active {
    background-color: #000000;
    color: white;
}
.inner-sidebar {
    display: grid;
    grid-template-rows: 1fr auto;
}
</style>