<template>
  <section id="intro">
    <div class="container">
      <div class="row">
        <div align="left" class="col-sm-12 col-md-8">
          <div class="intro-content box">
            <h2>Sell your Timeshare</h2>
            <p>
              A listing fee of R{{ getListingFee.amount }} including VAT is
              payable to list your timeshare week/module on the Uni-Vate
              website.
            </p>

            <div v-if="!userLoggedIn">
              <p>
                You must be registered as a user in order to load your weeks for
                sale. Please login and or register to complete.
              </p>

              <router-link class="btn-white-border" to="/user/register">
                Register
              </router-link>
              <router-link class="btn-white-border" to="/user/login">
                Login
              </router-link>
            </div>
          </div>
        </div>
      </div>
    </div>

    <carousel
      :nav="false"
      :dots="false"
      :items="1"
      :autoplay="true"
      :loop="true"
      id="intro-carousel"
      style="margin-top: -50px;"
      :responsive="{
        0: { items: 1, nav: false },
        600: { items: 1, nav: false },
      }"
    >
      <img class="item" src="/img/intro-carousel/timeshare-1.jpg" alt="" />
      <img class="item" src="/img/intro-carousel/timeshare-2.jpg" alt="" />
      <img class="item" src="/img/intro-carousel/timeshare-3.jpg" alt="" />
      <img class="item" src="/img/intro-carousel/timeshare-4.jpg" alt="" />
      <img class="item" src="/img/intro-carousel/timeshare-5.jpg" alt="" />
      <img class="item" src="/img/intro-carousel/timeshare-6.jpg" alt="" />
    </carousel>

    <div id="intro-carousel" class="owl-carousel"></div>
  </section>
</template>

<script>
/* eslint-disable */

import carousel from 'vue-owl-carousel'
import { mapState, mapActions, mapGetters } from 'vuex'
import Log from '../../../assets/Log'

export default {
  components: {
    carousel,
  },
  data() {
    return {
      userLoggedIn: Log.isLoggedIn(),
    }
  },
  computed: {
    ...mapGetters('fees', ['getListingFee']),
    ...mapState('authentication', ['isLoggedIn']),
    ...mapGetters({
      user: 'authentication/getUser',
      person: 'authentication/getPerson',
    }),
    isLoggedIn() {
      return this.user && this.person
    },
  },
}
</script>

<style lang="scss" scoped></style>
