<template>
  <div
    class="offer-container col-xs-12 col-sm-6 pb15"
    v-if="data"
  >
    <router-link :to="localizedRoute(link)">
      <div
        class="offer"
        v-lazy:background-image="image"
      >
        <h2 class="title m0 h1">
          {{ title }}
        </h2>
        <p class="subtitle m0 serif h3 uppercase">
          {{ subtitle }}
        </p>
      </div>
    </router-link>
  </div>
</template>

<script>
import cmsBlock from 'vsf-cms-block-mixin/components/cmsBlock'

export default {
  name: 'LeftBanner',
  mixins: [
    cmsBlock
  ],
  computed: {
    title () {
      return this.parsedContent.querySelector('h2').rawText
    },
    subtitle () {
      return this.parsedContent.querySelector('p').rawText
    },
    link () {
      return this.parsedContent.querySelector('a').attributes['href']
    },
    image () {
      return this.parsedContent.querySelector('img').attributes['src']
    }
  }
}
</script>