<template>
  <div>
    <v-footer class="py-sm-0 px-sm-0 pb-0 px-0 page-footer footer-component-border">
      <v-row
        align="center"
        justify="center"
        class="d-flex flex-column-reverse flex-sm-row pa-0 ma-0"
      >
        <v-col
          class="primary pb-md-3 px-sm-10 px-md-6 pt-md-12 pt-sm-4 pt-6 pl-lg-12 pr-lg-12"
          cols="12"
          md="8"
          sm="8"
          lg="8"
          xl="9"
        >
          <v-container class="pb-0 mb-0">
            <v-row class>
              <v-col cols="12" lg="3" md="3" sm="6">
                <v-list class="transparent-background py-1" flat>
                  <v-subheader class="pa-0 px-2 footer-component-lighten-5 fontsize-10 regular-font">ACCOUNT</v-subheader>
                  <v-list-item-group>
                    <v-list-item
                      class="px-2 footerpage_min_height"
                      href="#"
                      v-for="(acc,index) in accountLinks"
                      :key="index"
                    >
                      <v-list-item-title class="white--text fontsize-14 regular-font word-break footerpage_word_break pb-1">{{acc}}</v-list-item-title>
                    </v-list-item>
                  </v-list-item-group>
                </v-list>
              </v-col>
              <v-col cols="12" lg="3" md="3" sm="6">
                <v-list class="transparent-background py-1" flat>
                  <v-subheader class="pa-0 px-2 footer-component-lighten-5 fontsize-10 regular-font">COMPANY</v-subheader>
                  <v-list-item-group>
                    <v-list-item
                      class="px-2 footerpage_min_height"
                      href="#"
                      v-for="(company,index) in companyLinks"
                      :key="index"
                    >
                      <v-list-item-title
                        class="white--text fontsize-14 regular-font word-break footerpage_word_break pb-1"
                      >{{company}}</v-list-item-title>
                    </v-list-item>
                  </v-list-item-group>
                </v-list>
              </v-col>
              <v-col cols="12" lg="3" md="3" sm="6">
                <v-list class="transparent-background py_1" flat>
                  <v-subheader class="pa-0 px-2 footer-component-lighten-5 fontsize-10 regular-font">HELP</v-subheader>
                  <v-list-item-group>
                    <v-list-item
                      class="px-2 footerpage_min_height"
                      href="#"
                      v-for="(help,index) in helpLinks"
                      :key="index"
                    >
                      <v-list-item-title
                        class="white--text fontsize-14 regular-font word-break footerpage_word_break pb-1"
                      >{{help}}</v-list-item-title>
                    </v-list-item>
                  </v-list-item-group>
                </v-list>
              </v-col>
              <v-col cols="12" lg="3" md="3" sm="6">
                <v-list class="transparent-background py-1" flat>
                  <v-subheader class="pa-0 px-2 footer-component-lighten-5 fontsize-10 regular-font">CONNECT</v-subheader>
                  <v-list-item-group>
                    <v-list-item
                      class="px-2 footerpage_min_height"
                      href="#"
                      v-for="(connect,index) in connectLinks"
                      :key="index"
                    >
                      <v-list-item-title
                        class="white--text fontsize-14 regular-font word-break footerpage_word_break pb-1"
                      >{{connect}}</v-list-item-title>
                    </v-list-item>
                  </v-list-item-group>
                </v-list>
              </v-col>
            </v-row>
          </v-container>
          <v-container>
            <v-row class="d-flex flex-column-reverse flex-sm-row mt-md-5 mt-sm-5 pa-0 ma-0">
              <v-col
                md="auto"
                sm="12"
                lg="auto"
                class="white--text pr-sm-0 pl-md-4 pb-sm-1 pt-1 pt-sm-1 pt-md-3 mr-md-3 mr-lg-4"
              >
                <div v-html="copyrightString" class="d-inline-block caption"></div>
              </v-col>
              <v-col
                md="auto"
                sm="12"
                lg="auto"
                class="white--text pl-md-0 ml-sm-0 ml-md-0 pt-sm-1 pr-sm-1 pt-md-3 pb-1"
              >
                <div v-html="termsCondString" class="d-inline-block caption text-decoration-none"></div>
                <div v-html="privacyPolicyString" class="d-inline-block caption text-decoration-none"></div>
              </v-col>
            </v-row>
          </v-container>
        </v-col>
        <v-col md="4" sm="4" lg="4" xl="3" class="d-sm-flex white">
          <v-img
              :src="require('@/assets/Whiplash Panel@2x.png')"
            ></v-img>
          <!-- <v-row align="center" class="px-sm-6 px-2 pa-0 ma-0">
            <div class="pa-md-1">
              <v-col md="12" sm="12" xl="12" lg="12">
                <span
                  class="primary--text h3 font-weight-regular text-uppercase"
                >{{stayInTouch}}</span>
                <p
                  class="footer-fontcolor-black-darken body mb-0 pt-4 mt-md-4 mt-sm-4 pt-sm-0"
                >Be the first to know about special promotions, new collections and more when you sign up for our emails!</p>
              </v-col>
              <v-col md="12" sm="12" xl="12" lg="12" class="pb-0 pt-2 pt-sm-3">
                <v-row no-gutters>
                  <v-col md="12" sm="12" xl="12" lg="12">
                    <v-text-field
                      label="Your Email"
                      id="emailTextBox"
                      class="footerpage_email_textbox fontsize-14 regular-font"
                      single-line
                      solo
                      flat
                      tile
                    >
                      <v-btn
                        color="primary"
                        class="white--text mr-n3 text-uppercase footerpage_submit_email_btn body"
                        slot="append"
                      >SUBMIT</v-btn>
                    </v-text-field>
                  </v-col>
                </v-row>
              </v-col>
            </div>
          </v-row> -->
        </v-col>
      </v-row>
    </v-footer>
  </div>
</template>

<script>
export default {
  name: "FooterComponent",
  data() {
    return {
      listSubHeaderColor: "red",
      accountLinks: ["My Account", "Shipping & Delivery", "Order Status"],
      companyLinks: [
        "About Crane",
        "In the Workshop",
        "Post Script Blog",
        "Etiquette",
        "Careers"
      ],
      helpLinks: ["Retail Locator", "Crane Concierge", "Returns", "FAQs"],
      connectLinks: [
        "Facebook",
        "Instagram",
        "Pininterest",
        "",
        "1.800.268.2281",
        "customerservice@crane.com"
      ],
      copyrightString: "&copy; 2019 Crane stationary LLC",
      stayInTouch: "LET'S STAY IN TOUCH",
      termsCondString:
        "<a href='#' class='white--text footer-link'> Terms & Conditions </a>",
      privacyPolicyString:
        "&emsp; <a href='#' class='white--text footer-link'>  Privacy & Policy </a>"
    };
  }
};
</script>
<style src="./FooterComponent.scss" lang="scss"/>
