<template>
  <div>
    <NavBar />
    <div class="container-fluid">
      <NavBarEditar v-if="isManager" />
      <NavBarEditarUser v-else/>
      <NuxtPage />
      <CookieUsageNotification />
    </div>
    <Footer />
  </div>
</template>

<script>
import { useAuthStore } from '@/stores/auth'
export default {
  setup() {
    const auth = useAuthStore();
    return {
      auth,
    }
  },
  computed: {
    isManager() {
      return this.auth.isManager
    },
  }
}
</script>

<style lang="scss" scoped>
.container-fluid {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient($color-consumo-base-light, $color-bg-light);
  border-radius: 1rem;
  padding: 2rem;
  margin-bottom: 2rem;
  gap: 3rem;
  color: $color-primary;

  @include mobile {
    margin-top: 7rem;
  }
}
</style>