


<template>
  <v-container>
    <div class="h3 my-5 py-5 body-font1">Training</div>
    <div><b>PDS Training Materials</b></div>
    <div class="padding-space">PDS Documentation</div>
    <div>
      <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-PDS-Basic-Guide.pdf'
            )
          "
        >
          <div
            :class="hover ? 'primary--text' : 'black--text'"
            class="subheading"
          >
            Crane's PDS Basic Guide
          </div>
        </router-link>
      </v-hover>
    </div>
    <div>
      <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-PDS-Holiday-Basic-Guide.pdf'
            )
          "
        >
          <div
            :class="hover ? 'primary--text' : 'black--text'"
            class="subheading"
          >
            Crane's PDS Holiday Basic Guide
          </div>
        </router-link>
      </v-hover>
    </div>
    <div>
      <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-PDS%20Basic-Q%26A.pdf'
            )
          "
        >
          <div
            :class="hover ? 'primary--text' : 'black--text'"
            class="subheading"
          >
            Crane's PDS Basic Q&A
          </div>
        </router-link>
      </v-hover>
    </div>

    <div>
      <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-PDS-Advanced-Guide.pdf'
            )
          "
        >
          <div
            :class="hover ? 'primary--text' : 'black--text'"
            class="subheading"
          >
            Crane's PDS Advanced Guide
          </div>
        </router-link>
      </v-hover>
    </div>

    <div>
      <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-PDS-Advanced-Guide.pdf'
            )
          "
        >
          <div
            :class="hover ? 'primary--text' : 'black--text'"
            class="subheading"
          >
            Crane's PDS Advanced Q&A
          </div>
        </router-link>
      </v-hover>
    </div>

    <div>
      <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="padding-space">PDS Video Tutorials</div>
    <div>
      <v-hover v-slot:default="{ hover }">
        <router-link
          class="text-decoration-none whyteTmin10-font"
          :to="{ name: '' }"
        >
          <div
            :class="hover ? 'primary--text' : 'black--text'"
            class="subheading"
          >
            Video Demonstration - Placing a PDS Order
          </div>
        </router-link>
      </v-hover>
    </div>

    <div>
      <v-hover v-slot:default="{ hover }">
        <router-link
          class="text-decoration-none whyteTmin10-font"
          :to="{ name: '' }"
        >
          <div
            :class="hover ? 'primary--text' : 'black--text'"
            class="subheading"
          >
            PDS Holiday Order in a few steps
          </div>
        </router-link>
      </v-hover>
    </div>

    <div>
      <v-hover v-slot:default="{ hover }">
        <router-link class="text-decoration-none whyteTmin10-font" to="">
          <!-- to   -->
          <!-- @click.native="gotoLink('https://www.dropbox.com/s/md6dxx0hahlkd4l/2021%20PDS%20Refresh.mp4?dl=0')" -->
          <div
            :class="hover ? 'primary--text' : 'black--text'"
            class="subheading"
          >
            Multi Browser PDS
          </div>
        </router-link>
      </v-hover>
    </div>
    <div class="padding-space">PDS Sign Up Forms</div>
    <div>
      <v-hover v-slot:default="{ hover }">
        <router-link
          class="text-decoration-none whyteTmin10-font"
          to
          @click.native="
            goToLink(
              'http://emarketing.crane.com/retailer-portal/PDS-Usage-Agreement.pdf'
            )
          "
        >
          <div
            :class="hover ? 'primary--text' : 'black--text'"
            class="subheading"
          >
            PDS Usage Agreement
          </div>
        </router-link>
      </v-hover>
    </div>
    <div>
      <v-hover v-slot:default="{ hover }">
        <router-link
          class="text-decoration-none whyteTmin10-font"
          :to="{ name: '' }"
        >
          <div
            :class="hover ? 'primary--text' : 'black--text'"
            class="subheading"
          >
            Account Sign Up Form
          </div>
        </router-link>
      </v-hover>
    </div>
    <div class="padding-space1"><b>Retailer Portal Training Materials</b></div>
    <div>
      <v-hover v-slot:default="{ hover }">
        <router-link
          class="text-decoration-none whyteTmin10-font"
          to
          @click.native="
            goToLink(
              'http://emarketing.crane.com/retailer-portal/Retailer-Portal-Training-Overview.pdf'
            )
          "
        >
          <div
            :class="hover ? 'primary--text' : 'black--text'"
            class="subheading"
          >
            Retailer Portal Training Overview
          </div>
        </router-link>
      </v-hover>
    </div>

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

    <div>
      <v-hover v-slot:default="{ hover }">
        <router-link
          class="text-decoration-none whyteTmin10-font"
         to
          @click.native="
            goToLink(
              'http://emarketing.crane.com/retailer-portal/Retailer-Portal-Boxed-Ordering-Quick-Reference.pdf'
            )
          "
        >
          <div
            :class="hover ? 'primary--text' : 'black--text'"
            class="subheading"
          >
            How to Place a Boxed Order
          </div>
        </router-link>
      </v-hover>
    </div>
    <div class="padding-space1">
      <b>Universal Order Form Training Materials</b>
    </div>
    <div>
      <v-hover v-slot:default="{ hover }">
        <router-link
          class="text-decoration-none whyteTmin10-font"
           to
          @click.native="
            goToLink(
              'http://emarketing.crane.com/retailer-portal/Alternate-Characters-Reference-Sheet.pdf'
            )
          "
        >
          <div
            :class="hover ? 'primary--text' : 'black--text'"
            class="subheading"
          >
            Alternate Characters Reference Sheet
          </div>
        </router-link>
      </v-hover>
    </div>

    <div class="padding-space1"><b>Sign Up for Training</b></div>
    <div>No training sessions are currently scheduled at this time.</div>

    <div class="padding-space1">
      <v-hover v-slot:default="{ hover }">
        <router-link
          class="text-decoration-none whyteTmin10-font"
          :to="{ name: 'ResourcesPage' }"
        >
          <div
            :class="hover ? 'primary--text' : 'black--text'"
            class="subheading"
          >
            Back to Resources
          </div>
        </router-link>
      </v-hover>
    </div>
  </v-container>
</template>
<script>
export default {
  name: "Training",
  methods: {
    goToLink(pageLink) {
      window.open(pageLink, "_blank");
    },
  },
};
</script>

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