<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 />

        <!-- Page will be rendered here-->
        <v-card class="parameters-page-card">
          <div class="inner-container">
            <slot />
          </div>
        </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));
  padding: 24px;
  margin: 2% 3%;
}

.inner-container {
  max-width: 1200px;
  margin: 0 auto;
}
</style>
