<template>
  <div class="vin-information">
    <div class="vin-toggle d-inline-flex" :class="[isActive ? 'active' : '']" @click="toggleClass()">
      <textLink :text="HeadlineText" linkType="text" href="#!" />
    </div>
    <div class="vin-info">
      <div class="mt-3" v-html="BodyText"></div>
      <img :src="OptionalImage" alt="" />
    </div>
  </div>
</template>

<script>

import textLink from "@/ux-components/text-link/text-link";
export default {
  name: "vinInformation",
  components: {
    textLink,
  },
  data() {
    return {
      isActive: false,
      HeadlineText: "Where can I find my VIN?",
      BodyText: "<p class='mb-2'>You can find your VIN in a few places:</p> <ol> <li>Driver side windshield</li> <li>Driver side doorjamb</li> <li>Vehicle registration card</li> <li>Auto insurance card or app</li> </ol>",
      OptionalImage: "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/vin_location.svg?sfvrsn=63a9a2cf_3",
    };
  },
  methods: {
    toggleClass: function(event){
       this.isActive = !this.isActive;
    }
  }
}

</script>

<style lang="scss">
.vin-information {
  p,li {
    font-size: .875rem;
    color: $gray-600;
  }
  a {
    font-size: .875rem;
  }
  .vin-toggle {
    &:after {
      content: "";
      transition: all .5s ease;
      background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8.9' xml:space='preserve'%3e%3cpath d='M8 8.9c-.2 0-.5-.1-.6-.3L.3 1.5C.1 1.4 0 1.1 0 .9 0 .7.1.4.3.3.4.1.7 0 .9 0c.2 0 .5.1.6.3L8 6.7 14.5.2c.1-.1.4-.2.6-.2.2 0 .5.1.6.3s.3.4.3.6c0 .2-.1.5-.3.6L8.6 8.6c-.1.2-.4.3-.6.3z' fill='%231474a2'/%3e%3c/svg%3e");
      background-repeat: no-repeat;
      background-position: right center;
      margin-left: .5rem;
      width: 16px;
      height: auto;
    }
    &.active:after {
      transform: rotate(180deg);
    }
    &.active + .vin-info {
      max-height: 500px;
      transition: all 250ms ease-in;
      opacity: 1;
    }
  }
  .vin-info {
    max-height: 0;
    transition: all 250ms ease-out;
    overflow: hidden;
    opacity: 0;
    img {
      width: 117%;
      height: auto;
    }
  }
}
</style>
