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

    <v-app>
      <LayoutLoadingScreen />

      <LayoutHeader />

      <LayoutParametersMenu />

      <v-main class="main">

        <LayoutSubheader />

        <LayoutAlertBar class="mt-1" />

        <!-- Page will be rendered here-->
        <v-card class="parameters-page-card">
          <slot />
        </v-card>
      </v-main>

      <LazyLayoutAlertContainer />

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

<script setup lang="ts">

import {useLayoutStore} from "~/stores/layout";

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

<style scoped lang="scss">
  .parameters-page-card {
    background-color: rgb(var(--v-theme-neutral-very-soft));
    color: rgb(var(--v-theme-on-neutral-very-soft));
    margin: 3%;
    padding: 24px;
  }
</style>
