<template>
  <v-container>
    <div class="homepage-overflow-x-hidden white" v-if="serviceLevelsPage">
      <div class="h3 my-5 py-5 body-font1">{{ serviceLevelsPage.contentHeading }}</div>
      <div v-html="serviceLevelsPage.content"></div>
    </div>
    <!-- <div class="h3 my-5 py-10 body-font1">Service Levels</div>
    <div class="pb-5 whyte-book-font">Please reference your weekly service level email. If you do not receive this email and would like to receive it please contact Customer Service and ask to have your email address added to this mailing list.</div>
   
  

    <div class="py-10">
      <v-hover v-slot:default="{ hover }">
        <router-link
          class="text-decoration-none whyteTmin10-font"
          :to="{ name: 'RetailerCommunications' }"
        >
          <div
            :class="hover ? 'primary--text' : 'black--text'"
            class="subheading"
          >
        Back to Retailer Communications
          </div>
        </router-link>
      </v-hover>
    </div> -->
  </v-container>
</template>
<script>
export default {
  name: "ServiceLevels",
  methods: {
    goToLink(pageLink) {
      window.open(pageLink, "_blank");
    },
  },
   computed: {
    serviceLevelsPage: function () {
      let data = null;
      let pageContent = this.$store.state.layout.pageContent;
      if (pageContent.length) {
        data = pageContent.filter((element) => {
          return element.identifier === "service-levels";
        })[0];
      }

      return data;
    },
  },
};
</script>

<style src="./service_levels.scss" lang="scss" scoped/>