<template>
    <div class="recal-modal-container">
        <modal
            ref="recalModal"
            :footerButtonText="modalCloseButtonText"
            @footerButtonEvent="footerButtonClick">
            <h5
                class="header-text"
                v-html="modalHeaderText"></h5>
            <img
                :src="modalImage"
                class="mw-100 d-flex"
                alt="" />
            <div v-html="modalBodyText" class="recal-modal-body"></div>
        </modal>
    </div>
</template>

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

export default {
    name: 'recal-modal',
    components: {
        modal
    },
    computed: {
        modalBodyText() {
            return this.getCmsContent('RecalModal', 'BodyText');
        },
        modalHeaderText() {
            return this.getCmsContent('RecalModal', 'HeaderText');
        },
        modalFooterText() {
            return this.getCmsContent('RecalModal', 'FooterText');
        },
        modalImage() {
            return this.getCmsContent('RecalModal', 'Image');
        },
        modalCloseButtonText() {
            return this.getCmsContent('RecalModal', 'FooterText');
        }
    },
    methods: {
        openModal() {
            this.$refs.recalModal.openModal();
        },
        footerButtonClick() {
            this.$refs.recalModal.closeModal();
        },
    }

};
</script>

<style lang="scss" scoped>
:deep(.modal) {
    &.modal-component {
        .modal-dialog {
            .modal-content {
                .modal-body {
                    padding-left: 1.25rem;
                    padding-right: 1.25rem;
                }
            }
        }
        .modal-footer {
            button {
                &:hover {
                    background-color: $white;
                    color: #167cac;
                }
            }
        }
    }
    .recal-modal-body {
        padding: 10px 0 10px 0;
        p:first-child {
            margin-bottom: 10px;
        }
        p {
            strong {
                font-weight: 600;
            }
        }
    }
}
</style>
