<script setup>
import { watch } from 'vue';
import Content from '../viewer/content/Content.vue';
import StatusBar from '../viewer/statusbar/StatusBar.vue';
import TopBar from '../viewer/TopBar.vue';

import { ShowContent } from '../../services/Content.js';
import { useCampaignService } from '~/services/Campaign.js';
import ContentSidebar from '../partials/ContentSidebar.vue';

const { Campaign } = useCampaignService();

watch(Campaign, () => {
    if(Campaign.value) ShowContent.value = true;
}, { immediate: true });
</script>

<template>
    <div v-show="ShowContent" class="content-manager">
        <TopBar></TopBar>
        <div class="content-layout">
            <ContentSidebar></ContentSidebar>
            <Content></Content>
        </div>
        <StatusBar></StatusBar>
    </div>
</template>

<style scoped>
.content-manager {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.content-layout {
    min-height: 0;
    flex: 1;
    display: flex;
}
</style>
