<template>
  <v-list-group value="realms">
    <template #activator="{ props }">
      <v-list-item
        v-bind="props"
        prepend-icon="mdi-account-box-multiple"
        title="Realms"
      />
    </template>

    <v-list-item
      v-for="item in realms.available"
      exact
      append-icon="mdi-account-multiple"
      :to="{ name: 'realms.page', params: { realmId: item.id } }"
      :title="item.name"
    />

    <v-list-item
      append-icon="mdi-plus"
      title="Create a realm"
      variant="plain"
      :disabled="!id.userinfo.isLoggedIn"
      @click="createRealm"
    />
  </v-list-group>
</template>

<script setup lang="ts">
import { useUserinfo } from "@/stores/userinfo"
import { useRealms } from "@/stores/realms"

const id = useUserinfo()
const realms = useRealms()

function createRealm() {
  realms.related.edit_to = null
  realms.related.delete_to = null
  realms.show.editor = true
}
</script>
