<script setup lang="ts">
import { ref } from 'vue';
import { storeToRefs } from 'pinia';
import { useQuasar } from 'quasar';

import useLoader from 'stores/loader';
import DrawerComponent from 'components/DrawerComponent.vue';

const $q = useQuasar();
const loaderStore = useLoader();

const { visible } = storeToRefs(loaderStore);

const leftDrawerOpen = ref($q.screen.gt.sm);
</script>

<template>
  <q-layout view="lHh Lpr lFf">
    <q-header style="background-color: var(--background)">
      <div class="row items-center justify-between q-py-md q-px-lg">
        <q-btn
          round
          unelevated
          id="drawer-toggler"
          icon="mdi-backburger"
          :class="{ bordered: $q.dark.isActive }"
          class="surface-2"
          style="color: var(--gray-6)"
          @click="leftDrawerOpen = !leftDrawerOpen"
        />
        <q-btn
          round
          unelevated
          id="drawer-toggler"
          icon="mdi-switch"
          :class="{ bordered: $q.dark.isActive }"
          class="surface-2"
          style="color: var(--gray-6)"
          @click="$q.dark.toggle()"
        />
      </div>
    </q-header>

    <q-page-container style="background-color: transparent">
      <q-page class="q-px-lg q-pa-md">
        <router-view />
      </q-page>
    </q-page-container>

    <drawer-component v-model:leftDrawerOpen="leftDrawerOpen" />

    <global-loading :visibility="visible" />
  </q-layout>
</template>
