<script setup lang="ts">
import { useQuery } from '@vue/apollo-composable';
import { MeDocument } from '~/composables/graphql/generated';
import { hasManagerAccess } from '~/utils/roles';

const route = useRoute();
const isLoginPage = computed(() => route.path === '/login');
const meQuery = useQuery(MeDocument);
const hasManagerDock = computed(() => (
  !isLoginPage.value && hasManagerAccess(meQuery.result.value?.me?.role)
));
</script>

<template>
  <div class="lk-shell" data-theme="aqua">
    <UiAppHeader v-if="!isLoginPage" />
    <main
      class="mx-auto w-full max-w-[1440px] p-4 pt-[104px] md:p-6 md:pt-[112px] lg:p-8 lg:pt-[118px]"
      :class="hasManagerDock ? 'pb-[116px] md:pb-[128px]' : ''"
    >
      <div class="lk-content-canvas">
        <NuxtPage />
      </div>
    </main>
    <UiAppManagerDock v-if="hasManagerDock" />
  </div>
</template>
