<template>
  <!-- Modal -->
  <div class="modal fade modal-component" :id="this.cmsWidgetName" tabindex="-1" aria-labelledby="ModalComponentLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-body ps-4 pe-4 pt-5 pb-4">
          <img :src="this.ModalImage" class="w-100 mb-4" alt="" />
          <h5 class="mb-4" v-html="this.ModalHeadline"></h5>
          <p class="fw-bold mb-2 subheader-text" v-html="this.ModalSubheadertext"></p>
          <p class="mb-0" v-html="this.ModalBodyText"></p>
        </div>
        <div class="modal-footer px-4 pt-4 pb-5">
          <button class="btn btn-secondary w-100" data-bs-dismiss="modal" v-html="this.ModalCloseButtonText"></button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'modal',
  props: {
    cmsWidgetName: String,
  },
  computed: {
      ModalHeadline(){
        return this.getCmsContent(this.cmsWidgetName, "HeaderText");
      },
      ModalSubheadertext(){
        return this.getCmsContent(this.cmsWidgetName, "SubheaderText");
      },
      ModalBodyText(){
        return this.getCmsContent(this.cmsWidgetName, "BodyText");
      },
      ModalImage(){
        return this.getCmsContent(this.cmsWidgetName, "Image");
      },
      ModalCloseButtonText(){
        return this.getCmsContent(this.cmsWidgetName, "FooterText");
      }
  },
}
</script>

<style lang="scss">
.modal {
  h5,
  strong,
  .subheader-text {
    color: $black;
  }
  &.modal-component {
    .modal-dialog {
      .modal-content {
        max-width: 327px;
        margin: 0 auto;
        box-shadow: 0px 16px 48px -16px rgba(0, 0, 0, 0.25);
        .modal-body {
          ul {
            margin-bottom: 0;
          }
        }
      }
    }
    .modal-footer {
      border-top: none;
      button {
        margin: 0;
      }
    }
  }
}
.modal-backdrop {
  &.show {
    opacity: .4;
  }
}
</style>
