<template>
  <div>
    <!-- Show the loading page -->
    <client-only placeholder-tag="client-only-placeholder" placeholder=" " />

    <v-app>
      <LayoutLoadingScreen />

      <LayoutHeader />

      <LayoutMainMenu />

      <v-main class="main">
        <LayoutSubheader />

        <LayoutAlertBar class="mt-1" />

        <!-- Page will be rendered here-->
        <slot />
      </v-main>

      <LazyLayoutAlertContainer />
    </v-app>
  </div>
</template>

<script setup lang="ts">
import { useLayoutStore } from '~/stores/layout'

const layoutStore = useLayoutStore()
layoutStore.name = 'default'
</script>
