<template>
  <v-container>
    <div class="h3 my-10 body-font1">Personalized Albums</div>
    <div><b>Crane & Co.</b></div>

    <div class="padding-space">
      <v-hover v-slot:default="{ hover }">
        <router-link
          class="text-decoration-none whyteTmin10-font"
           to 
         @click.native="goToLink(
              'http://emarketing.crane.com/retailer-portal/Crane-Stationery-2021.pdf'
            )
          "
        >
          <div
            :class="hover ? 'primary--text' : 'black--text'"
            class="subheading"
          >
            Crane Stationery 2021
          </div>
        </router-link>
      </v-hover>
    </div>
    <div class="padding-space">
      <v-hover v-slot:default="{ hover }">
        <router-link
          class="text-decoration-none whyteTmin10-font"
          to 
         @click.native="goToLink(
              'http://emarketing.crane.com/retailer-portal/Crane-Stationery-2021-Pricing.pdf'
            )
          "
        >
          <div
            :class="hover ? 'primary--text' : 'black--text'"
            class="subheading"
          >
            Crane Stationery 2021 - Pricing Booklet
          </div>
        </router-link>
      </v-hover>
    </div>

    <div class="padding-space">
      <v-hover v-slot:default="{ hover }">
        <router-link
          class="text-decoration-none whyteTmin10-font"
         to 
         @click.native="goToLink(
              'http://emarketing.crane.com/retailer-portal/Crane-Wedding.pdf'
            )
          "
        >
          <div
            :class="hover ? 'primary--text' : 'black--text'"
            class="subheading"
          >
            Crane Wedding
          </div>
        </router-link>
      </v-hover>
    </div>
    <div class="padding-space">
      <v-hover v-slot:default="{ hover }">
        <router-link
          class="text-decoration-none whyteTmin10-font"
           to 
         @click.native="goToLink(
              'http://emarketing.crane.com/retailer-portal/Crane-Wedding-Reference-Guide.pdf'
            )
          "
        >
          <div
            :class="hover ? 'primary--text' : 'black--text'"
            class="subheading"
          >
            Crane Wedding Reference Guide
          </div>
        </router-link>
      </v-hover>
    </div>
    <div class="mt-10"><b>Crane Stationery Holiday 2021</b></div>
    <div class="padding-space">
      <v-hover v-slot:default="{ hover }">
        <router-link
          class="text-decoration-none whyteTmin10-font"
           to 
         @click.native="goToLink(
              'http://emarketing.crane.com/retailer-portal/Crane-Holiday-2021.pdf'
            )
          "
        >
          <div
            :class="hover ? 'primary--text' : 'black--text'"
            class="subheading"
          >
            Crane Holiday 2021
          </div>
        </router-link>
      </v-hover>
    </div>

     <div class="mt-10"><b> William Arthur</b></div>
    <div class="padding-space">
      <v-hover v-slot:default="{ hover }">
        <router-link
          class="text-decoration-none whyteTmin10-font"
          to 
         @click.native="goToLink(
              'http://emarketing.crane.com/retailer-portal/William-Arthur-Weddings-I.pdf'
            )
          "
        >
          <div
            :class="hover ? 'primary--text' : 'black--text'"
            class="subheading"
          >
        William Arthur Weddings Volume One - 2019
          </div>
        </router-link>
      </v-hover>
    </div>
     <div class="padding-space">
      <v-hover v-slot:default="{ hover }">
        <router-link
          class="text-decoration-none whyteTmin10-font"
           to 
         @click.native="goToLink(
              'http://emarketing.crane.com/retailer-portal/William-Arthur-Weddings-II.pdf'
            )
          "
        >
          <div
            :class="hover ? 'primary--text' : 'black--text'"
            class="subheading"
          >
         William Arthur Weddings Volume Two - 2019
          </div>
        </router-link>
      </v-hover>
    </div>
     <div class="my-12  pb-12">
      <v-hover v-slot:default="{ hover }">
        <router-link
          class="text-decoration-none whyteTmin10-font"
          :to="{ name: 'PersonalizedProductsOrdering' }"
        >
          <div
            :class="hover ? 'primary--text' : 'black--text'"
            class="subheading"
          >
        Back to Personalized Products & Ordering
          </div>
        </router-link>
      </v-hover>
    </div>
  </v-container>
</template>
<script>
export default {
  name: "PersonalizedAlbums",
  methods: {
    goToLink(pageLink) {
      window.open(pageLink, "_blank");
    },
  },
};
</script>
<style src="./personalized_albums.scss" lang="scss" scoped/>
