<template>
    <modal
        :ref="ModalName"
        :modalId="ModalName"
        :footerButtonText="ModalCloseButtonText"
        @footerButtonEvent="footerButtonClick">
        <img
            :src="ModalImage"
            class="mw-100 d-flex mx-auto mb-4"
            alt="" />
        <h5
            class="mb-4"
            :class="cssModalHeadlineClass"
            v-html="ModalHeadline"></h5>
        <p
            class="fw-bold mb-2 subheader-text"
            v-html="ModalSubheadertext"></p>
        <p
            class="mb-0"
            v-html="ModalBodyText"></p>
        <p
            v-if="ModalSubBodyText"
            class="my-4 caption modal-sub-body"
            v-html="ModalSubBodyText"></p>
        <slot></slot>
    </modal>
</template>

<script>
import modal from '@/digital-components/modal/modal.vue';

export default {
    name: 'content-group-modal',
    components: {
        modal
    },
    props: {
        cmsWidgetName: String,
        cssModalHeadlineClass: String
    },
    computed: {
        ModalName() {
            return this.cmsWidgetName;
        },
        ModalHeadline() {
            return this.getCmsContent(this.cmsWidgetName, 'HeaderText');
        },
        ModalSubheadertext() {
            return this.getCmsContent(this.cmsWidgetName, 'SubheaderText');
        },
        ModalBodyText() {
            return this.getCmsContent(this.cmsWidgetName, 'BodyText');
        },
        ModalSubBodyText() {
            return this.getCmsContent(this.cmsWidgetName, 'BodyText2');
        },
        ModalImage() {
            return this.getCmsContent(this.cmsWidgetName, 'Image');
        },
        ModalCloseButtonText() {
            return this.getCmsContent(this.cmsWidgetName, 'FooterText');
        }
    },
    methods: {
        openModal() {
            this.$refs[this.ModalName].openModal();
        },

        footerButtonClick() {
            this.$refs[this.ModalName].closeModal();
        }
    }
};
</script>

<style lang="scss" scoped>
.modal {
    &.modal-component {
        .modal-dialog {
            .modal-content {
                .modal-body {
                    .modal-sub-body {
                        color: $gray-600;
                    }
                    ul {
                        margin-bottom: 0;
                    }
                    p {
                        &:last-child {
                            margin-bottom: 0;
                        }
                    }
                    h5 {
                        &.text-center {
                            text-align: center;
                        }
                    }
                }
            }
        }
    }
}
</style>
