<template>
  <q-layout view="hHh lpr lFf">
    <q-header elevated>
      <q-toolbar>
        <q-toolbar-title>
          <q-avatar rounded>
            <img src="flaschengeist-logo-white.svg" />
          </q-avatar>
          <span class="gt-xs"> Flaschengeist </span>
        </q-toolbar-title>
        <shortcut-link
          v-for="(shortcut, index) in shortcuts"
          :key="'shortcut' + index"
          :shortcut="shortcut"
        />
        <shortcut-link v-if="$route.name != 'about_out'" :shortcut="about" />
        <shortcut-link v-if="$route.name != 'login'" :shortcut="login" />
      </q-toolbar>
    </q-header>

    <q-page-container>
      <router-view />
    </q-page-container>
  </q-layout>
</template>

<script lang="ts">
import { defineComponent, inject } from 'vue';
import { FG_Plugin } from '@flaschengeist/typings';
import ShortcutLink from 'components/navigation/ShortcutLink.vue';

export default defineComponent({
  name: 'OutLayout',
  components: { ShortcutLink },
  setup() {
    const flaschengeist = inject<FG_Plugin.Flaschengeist>('flaschengeist');
    const shortcuts = flaschengeist?.outerShortcuts || [];
    const about: FG_Plugin.Shortcut = { icon: 'mdi-information', link: 'about_out' };
    const login: FG_Plugin.Shortcut = { icon: 'mdi-login-variant', link: 'login' };

    return { about, login, shortcuts };
  },
});
</script>
