<template>
    <div class="page-container-grouped-styles">
        <siteHeader cmsWidgetName="SiteHeaderWidget" />
        <div class="main-content-container">
            <siteSubHeader
                cmsWidgetName="SiteSubHeaderWidget"
                class="sub-header-content"
                justification="left" />
        </div>
    </div>
</template>
<script>
// Components
import siteHeader from '@/iss-components/site-header/site-header.vue';
import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
// Supporting files
import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
import issPageValues from '@/router/router-constants/issPage-values.js';
import settleAllPromises from '@/helpers/layout-helper';
import { useMainStore } from '@/store';

export default {
    name: 'bailout-confirmation',
    components: {
        siteHeader,
        siteSubHeader
    },
    async beforeRouteEnter(to, from, next) {
        // Call APIs
        const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
        // Settle promises and get results
        const promiseResultMap = [
            {
                resultKey: 'cmsContent',
                promise: cmsContentPromise
            }
        ];
        // use resultMap to populate layout content.
        const resultMap = await settleAllPromises(promiseResultMap);

        next((vm) => {
            vm.setCmsContent(resultMap.cmsContent);
        });
    },
    setup() {
        const mainStore = useMainStore();
        return { mainStore };
    },
    data() {
        const bailoutConfirmationData = useMainStore().pageData(issPageValues.BAILOUT_CONFIRMATION);
        return {
            bailoutConfirmationModel: bailoutConfirmationData
        };
    },
    computed: {},
    methods: {}
};
</script>

<style lang="scss">
@import '@/styles/bailout-common.scss';
</style>
