<template>
    <form>
        <div class="fade-on-route-transition">
            <div class="justify-content-center">
                <siteHeader cmsWidgetName="SiteHeaderWidget" />
            </div>
            <div class="iss-heritage-container-width">
                <div class="contact-confirmation-container iss-heritage-content-container-width">
                    <siteSubHeader
                        cmsWidgetName="SiteSubHeaderWidget"
                        class="sub-header-content mt-4"
                        justification="left" />
                </div>
            </div>
        </div>
    </form>
</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: 'contact-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 contactConfirmationData = useMainStore().pageData(issPageValues.CONTACT_CONFIRMATION);
        return {
            contactConfirmationModel: contactConfirmationData
        };
    },
    computed: {},
    methods: {}
};
</script>

<style lang="scss">
.iss-heritage-container-width {
    .contact-confirmation-container {
        position: relative;
        min-height: 1px;
        padding-left: .9375rem;
        padding-right: .9375rem;
    }
}
.sub-header-content {
    h5 {
        margin-bottom: 1rem;
    }
}
</style>
