<template>
  <q-layout view="hHh lpr lFf">
    <q-header elevated>
      <q-toolbar>
        <q-toolbar-title>
          <q-avatar>
            <img src="logo.svg" />
          </q-avatar>
          <span class="gt-xs">
            Flaschengeist
          </span>
        </q-toolbar-title>
        <div>
          <short-cut-link
            v-for="(shortcut, index) in $flaschengeistPlugins.shortcutsOut"
            :key="'shortcut' + index"
            :link="shortcut.link"
            :icon="shortcut.icon"
          />
        </div>
        <q-btn
          flat
          round
          dense
          icon="mdi-information"
          v-if="$route.name != 'about_out'"
          @click="$router.push({ name: 'about_out' })"
        />
        <q-btn
          flat
          round
          dense
          icon="mdi-login-variant"
          v-if="$route.name != 'login'"
          @click="$router.push({ name: 'login' })"
        />
      </q-toolbar>
    </q-header>

    <BackendOffline />

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

<script lang="ts">
import { defineComponent } from '@vue/composition-api';
import ShortCutLink from 'components/navigation/ShortCutLink.vue';
import BackendOffline from 'components/loading/BackendOffline.vue';

export default defineComponent({
  name: 'OutLayout',
  components: { ShortCutLink, BackendOffline }
});
</script>
