<template>
  <v-container>
    <div class="homepage-overflow-x-hidden white" v-if="resourcePage">
      <div class="h3 my-5 py-5 body-font1">{{ resourcePage.title }}</div>
      <div v-html="resourcePage.content"></div>
    </div>
    <!-- <div class="h3 my-5 py-5 body-font1">Resources</div> -->

    <!-- <v-hover v-slot:default="{ hover }" >
      <router-link class="text-decoration-none   whyteTmin10-font" :to="{ name: 'BoxedProductsOrdering' }">
        <div :class="hover ? 'primary--text' : 'black--text'" class="subheading " >
          Boxed Products & Ordering
        </div>
      </router-link>
    </v-hover>
    <div class="padding-space ">Boxed product catalogs, price lists and order forms</div>

    <v-hover v-slot:default="{ hover }">
      <router-link class="text-decoration-none " :to="{ name: 'PersonalizedProductsOrdering' }">
        <div :class="hover ? 'primary--text' : 'black--text'" class="subheading">
          Personalized Products & Ordering
        </div>
      </router-link>
    </v-hover>
    <div class="pt-1">Electronic order form and wedding program template downloads</div>
    <div class="padding-space">
      Album PDF's design elements information, custom information and supplied
      art guidelines
    </div>

    <v-hover v-slot:default="{ hover }">
      <router-link class="text-decoration-none " :to="{ name: 'MarketingToolsPromotions' }">
        <div :class="hover ? 'primary--text' : 'black--text'" class="subheading">
          Marketing Tools & Promotions
        </div>
      </router-link>
    </v-hover>
    <div class="padding-space">
      Promotion details, marketing collateral, album imagery, and brand logos
    </div>

    <v-hover v-slot:default="{ hover }">
      <router-link class="text-decoration-none " :to="{ name: 'RetailerCommunications' }">
        <div :class="hover ? 'primary--text' : 'black--text'" class="subheading">
          Retailer Communications
        </div>
      </router-link>
    </v-hover>
    <div class="padding-space"> 
      Archive of amil communications about service levels, product and pricing
      announcements, monthly marketing emails and more
    </div>

    <v-hover v-slot:default="{ hover }">
      <router-link class="text-decoration-none " :to="{ name: 'Training' }">
        <div :class="hover ? 'primary--text' : 'black--text'" class="subheading">
          Training
        </div>
      </router-link>
    </v-hover>
    <div class="pt-1">Upcoming Training calendar and sign-up details</div>
    <div class="padding-space">
      Archive of training materials for PDS, Retailer Portal and the Universal
      Order Form
    </div>

    <v-hover v-slot:default="{ hover }">
      <router-link class="text-decoration-none " :to="{ name: 'ContactUs' }">
        <div :class="hover ? 'primary--text' : 'black--text'" class="subheading">
          Contact Us
        </div>
      </router-link>
    </v-hover>
    <div class="padding-space">
      Account Manager contact list, and Customer Service, PDS and Retailer
      Portal Support contat information and hours of operation
    </div>

    <v-hover v-slot:default="{ hover }" >
      <router-link class="text-decoration-none padding-space" :to="{ name: 'AccountDashboard'}">
        <div :class="hover ? 'primary--text' : 'black--text'" class="subheading">
          Back to Retailer Portal Dashboard
        </div>
      </router-link>
    </v-hover> -->
  </v-container>
</template>
<script>
/* eslint-disable */

export default {
  name: "ResourcesPage",
  computed: {
    resourcePage: function () {
      let data = null;
      let pageContent = this.$store.state.layout.pageContent;
      if (pageContent.length) {
        data = pageContent.filter((element) => {
          return element.identifier === "resources";
        })[0];
      }

      return data;
    },
  },
};
</script>
<style src="./resources.scss" lang="scss" scoped/>