<template>
  <div
    id="page-wrapper"
    class="w100 relative-position column no-wrap no-scroll overflow-hidden"
    style="height: 100vh;"
    >
    <div
      id="tg-area-inset-top"
      style="height: var(--tg-safe-area-inset-top) !important; flex-shrink: 0;"
    />
    <div
      id="tg-safe-area" 
      class="flex justify-center items-center overflow-hidden"
      style="height: var(--tg-content-safe-area-inset-top) !important; flex-shrink: 0;"
      >
      <base-logo text-color="primary" :withBackground="false" animated/>
    </div>
    <div
      class="text-primary text-bold flex items-center justify-between q-ma-none q-py-none q-px-md text-h6 no-scroll no-wrap w100"
      style="min-height: 48px;"
      id="page-title"
      >
      <slot name="title"/>
    </div>

    <div
      class="column w100"
      style="flex: 1 1 auto; min-height: 0;"
      >
      <slot/>
    </div>

    <div
      id="tabs"
      v-if="hasTabs" 
      class="absolute-bottom w100"
      >
      <slot name="tabs"/>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { useSlots, computed } from 'vue'
  import BaseLogo from 'components/BaseLogo.vue'

  const slots = useSlots()
  const hasTabs = computed(() => !!slots.tabs)

</script>

<style scoped>
</style>
