<script setup lang="ts">
import CardContent from '~/components/pub/ui/card/CardContent.vue'

const route = useRoute()
const contentFrame = computed(() => route.meta.contentFrame)
const contentFrameClass = computed(() => {
  switch (contentFrame.value) {
    case 'cf-container-2xl':
      return 'cf-container-2xl'
    case 'cf-container-xl':
      return 'cf-container-xl'
    case 'cf-container-lg':
      return 'cf-container-lg'
    case 'cf-container-md':
      return 'cf-container-md'
    case 'cf-container-sm':
      return 'cf-container-sm'
    case 'cf-full-width':
      return 'cf-full-width'
    default:
      return 'cf-container-lg'
  }
})
</script>

<template>
  <SidebarProvider>
    <LayoutAppSidebar />
    <SidebarInset>
      <LayoutHeader />
      <div :class="`w-full p-4 xl:p-5 2xl:p-6 flex justify-center ${contentFrameClass}`">
        <div v-if="contentFrame !== 'cf-no-frame'">
          <Card>
            <CardContent>
              <slot />
            </CardContent>
          </Card>
        </div>
        <slot v-else />
      </div>
    </SidebarInset>
  </SidebarProvider>
</template>

<style scoped>
.cf-container > *,
.cf-container-lg > *,
.cf-container-md > *,
.cf-container-sm > *,
.cf-full-width {
  width: 100%;
}

.cf-full-width > * {
  width: 100%;
}

.cf-container-2xl > * {
  max-width: 1400px;
}

.cf-container-xl > * {
  max-width: 1200px;
}

.cf-container-lg > * {
  max-width: 992px;
}

.cf-container-md > * {
  max-width: 768px;
}

.cf-container-sm > * {
  max-width: 576px;
}
</style>
