<template>
  <q-layout view="lHh Lpr lFf">
    <q-header elevated>
      <q-toolbar>
        <q-btn
          flat
          dense
          round
          icon="menu"
          aria-label="Menu"
          @click="toggleLeftDrawer"
        />
        <q-toolbar-title>
          Kintone App Builder
          <q-badge align="top" outline>V{{ env.version }}</q-badge>
        </q-toolbar-title>
      </q-toolbar>
    </q-header>

    <q-drawer
      v-model="leftDrawerOpen"
      :show-if-above="false"
      bordered
    >
      <q-list>
        <q-item-label
          header
        >
          Essential Links
        </q-item-label>

        <EssentialLink
          v-for="link in essentialLinks"
          :key="link.title"
          v-bind="link"
        />
      </q-list>
    </q-drawer>

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

<script setup lang="ts">
import { ref } from 'vue';
import EssentialLink, { EssentialLinkProps } from 'components/EssentialLink.vue';

const essentialLinks: EssentialLinkProps[] = [
{
    title: 'ホーム',
    caption: 'home',
    icon: 'home',
    link: '/',
    target:'_self'
  },
  {
    title: 'ルールエディター',
    caption: 'rule',
    icon: 'rule',
    link: '/#/ruleEditor',
    target:'_self'
  },
  {
    title: 'FlowEditor',
    caption: 'FlowEditor',
    icon: 'account_tree',
    link: '/#/flowEditor',
    target:'_self'
  },
  {
    title:'',
    isSeparator:true
  },
  {
    title:'Kintone ポータル',
    caption:'Kintone',
    icon:'cloud_queue',
    link:'https://mfu07rkgnb7c.cybozu.com/k/#/portal'
  },
  {
    title:'CUSTOMINE',
    caption:'gusuku',
    link:'https://app-customine.gusuku.io/drive.html',
    icon:'settings_suggest'
  },
  {
    title:'Kintone API ドキュメント',
    caption:'Kintone API',
    link:'https://cybozu.dev/ja/kintone/docs/',
    icon:'help_outline'
  },
  {
    title:'',
    isSeparator:true
  },
  {
    title: 'Docs',
    caption: 'quasar.dev',
    icon: 'school',
    link: 'https://quasar.dev'
  },
  {
    title: 'Icons',
    caption: 'Material Icons',
    icon: 'insert_emoticon',
    link: 'https://fonts.google.com/icons?selected=Material+Icons:insert_emoticon:'
  },
  {
    title: 'Github',
    caption: 'github.com/quasarframework',
    icon: 'code',
    link: 'https://github.com/quasarframework'
  },
  {
    title: 'Discord Chat Channel',
    caption: 'chat.quasar.dev',
    icon: 'chat',
    link: 'https://chat.quasar.dev'
  },
  {
    title: 'Forum',
    caption: 'forum.quasar.dev',
    icon: 'record_voice_over',
    link: 'https://forum.quasar.dev'
  },
  {
    title: 'Twitter',
    caption: '@quasarframework',
    icon: 'rss_feed',
    link: 'https://twitter.quasar.dev'
  },
  {
    title: 'Facebook',
    caption: '@QuasarFramework',
    icon: 'public',
    link: 'https://facebook.quasar.dev'
  },
  {
    title: 'Quasar Awesome',
    caption: 'Community Quasar projects',
    icon: 'favorite',
    link: 'https://awesome.quasar.dev'
  }
];

const leftDrawerOpen = ref(false)

const env=process.env;

function toggleLeftDrawer() {
  leftDrawerOpen.value = !leftDrawerOpen.value
}
</script>
