<script setup>
import { useTabsBarStore } from "@/store/tabsbar";
const cachedViews = useTabsBarStore().cachedViews;

const props = defineProps({
    hasPadding: { type: Boolean, default: false }
});
</script>

<template>
    <section :class="['tjm_main_content_container', hasPadding && 'content-has-padding']">
        <router-view v-slot="{ Component, route }">
            <transition-group appear name="fade-transform" mode="out-in">
                <keep-alive :include="cachedViews">
                    <component :is="Component" :key="route.path" />
                </keep-alive>  
            </transition-group>
        </router-view>
    </section>
</template>

<style lang="scss" scoped>
.tjm_main_content_container {
  min-height: calc(
    $base-main-height + $base-tabsbar-height + 2 * $base-padding
  );
  background-color: inherit;
}

.content-has-padding {
  min-height: $base-main-height;
  padding: $base-padding;
}
</style>