<template>
  <q-layout view="lHh Lpr lFf">
    <q-header elevated>
      <q-toolbar>
        <q-btn flat dense round icon="menu" :aria-label="t('app.menu')" @click="toggleLeftDrawer" />

        <q-toolbar-title> {{ t('app.title') }} </q-toolbar-title>

        <div>Quasar v{{ $q.version }}</div>
      </q-toolbar>
    </q-header>

    <q-drawer v-model="leftDrawerOpen" show-if-above bordered>
      <q-list>
        <q-item-label header>{{ t('app.links') }}</q-item-label>
        <q-item clickable to="/" exact>
          <q-item-section avatar>
            <q-icon name="home" />
          </q-item-section>
          <q-item-section>
            <q-item-label>{{ t('app.home') }}</q-item-label>
          </q-item-section>
        </q-item>
        <q-item clickable to="/dev/api/endpoints" exact>
          <q-item-section avatar>
            <q-icon name="api" />
          </q-item-section>
          <q-item-section>
            <q-item-label>{{ t('dev.apiEndpointsTester') }}</q-item-label>
          </q-item-section>
        </q-item>
        <q-item clickable to="/dev/api/mail-debug" exact>
          <q-item-section avatar>
            <q-icon name="mail" />
          </q-item-section>
          <q-item-section>
            <q-item-label>{{ t('dev.mailDebug') }}</q-item-label>
          </q-item-section>
        </q-item>
      </q-list>
    </q-drawer>

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

<script setup lang="ts">
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';

const { t } = useI18n();
const leftDrawerOpen = ref(false);

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