<template>
  <v-app full-height>
    <v-navigation-drawer>
      <v-img src="/logo.jpg" height="75" class="my-6" />

      <v-list color="primary" lines="two">
        <v-list-item
          to="/dashboard/site"
          title="Site Analytics"
          prepend-icon="mdi-view-dashboard"
        />
        <v-list-item
          to="/dashboard/data"
          title="Data Analytics"
          prepend-icon="mdi-finance"
        />
      </v-list>

      <template #append>
        <v-list lines="two">
          <v-list-item
            @click="logOut"
            title="Log out"
            prepend-icon="mdi-logout"
            base-color="error"
          />
        </v-list>
      </template>
    </v-navigation-drawer>

    <v-app-bar v-if="mdAndDown" elevation="2">
      <template #prepend>
        <v-img src="/logo.jpg" width="75" class="ml-3" />
      </template>

      <template #append>
        <v-btn
          @click="logOut"
          class="mr-3"
          variant="tonal"
          color="error"
          icon="mdi-logout"
        />
      </template>
    </v-app-bar>

    <v-main>
      <router-view />

      <v-bottom-navigation :active="mdAndDown" color="primary" elevation="2">
        <v-btn to="/dashboard/site">
          <v-icon icon="mdi-view-dashboard" />
          <span>Site Analytics</span>
        </v-btn>
        <v-btn to="/dashboard/data">
          <v-icon icon="mdi-finance" />
          <span>Data Analytics</span>
        </v-btn>
      </v-bottom-navigation>
    </v-main>
  </v-app>
</template>

<script setup>
definePageMeta({
  middleware: ["authentication"],
  layout: false,
});

const { mdAndDown } = useDisplay();
const { logout } = useDirectusAuth();

const logOut = async () => {
  await logout();
  return navigateTo("/login");
};
</script>
