<template>
    <div class="recal-modal-container">
        <modal
            ref="oemEndorsementModal"
            :footerButtonText="modalCloseButtonText"
            @footerButtonEvent="footerButtonClick">
            <h5
                class="header-text"
                v-html="modalHeaderText"></h5>
            <div v-html="modalBodyText" class="oem-endorsement-modal-body"></div>
        </modal>
    </div>
</template>

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

export default {
    name: 'oem-endorsement-modal',
    components: {
        modal
    },
    props: {
        cmsWidgetName: {
            type: String,
            default: 'OEMEndorsementModal'
        }
    },
    computed: {
        modalBodyText() {
            return this.getCmsContent(this.cmsWidgetName, 'BodyText');
        },
        modalHeaderText() {
            return this.getCmsContent(this.cmsWidgetName, 'HeaderText');
        },
        modalCloseButtonText() {
            return this.getCmsContent(this.cmsWidgetName, 'FooterText');
        },
    },
    methods: {
        openModal() {
            this.$refs.oemEndorsementModal.openModal();
        },
        footerButtonClick() {
            this.$refs.oemEndorsementModal.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: $heritage-blue-primary;
                    color: $white;
                }
            }
        }
    }
    .oem-endorsement-modal-body {
        padding: 10px 0 10px 0;
        p:first-child {
            margin-bottom: 10px;
        }
    }
}
</style>
