<template>
  <div>
    <ul class="nav nav-tabs nav-justified" id="myTab" role="tablist">
      <li class="nav-item">
        <a
          class="nav-link active"
          id="home-tab"
          data-toggle="tab"
          href="#facilities"
          role="tab"
          aria-controls="home"
          aria-selected="true"
        >
          <h2>Facilities</h2>
        </a>
      </li>
      <li class="nav-item">
        <a
          class="nav-link"
          id="profile-tab"
          data-toggle="tab"
          href="#directions"
          role="tab"
          aria-controls="profile"
          aria-selected="false"
        >
          <h2>Directions</h2>
        </a>
      </li>
      <li class="nav-item">
        <a
          class="nav-link"
          id="contact-tab"
          data-toggle="tab"
          href="#layout"
          role="tab"
          aria-controls="contact"
          aria-selected="false"
        >
          <h2>Layout</h2>
        </a>
      </li>
      <li class="nav-item">
        <a
          class="nav-link"
          id="contact-tab"
          data-toggle="tab"
          href="#media"
          role="tab"
          aria-controls="contact"
          aria-selected="false"
        >
          <h2>Media</h2>
        </a>
      </li>
    </ul>
    <div class="tab-content" id="myTabContent">
      <div
        class="tab-pane fade show active"
        id="facilities"
        role="tabpanel"
        aria-labelledby="home-tab"
      >
        <facilities :resortCode="resortCode" />
      </div>
      <div class="tab-pane fade" id="directions" role="tabpanel" aria-labelledby="profile-tab">
        <directions :resortCoords="resortCoords" :resortName="resortName" />
      </div>
      <div class="tab-pane fade mt-3" id="layout" role="tabpanel" aria-labelledby="contact-tab">
        <img :src="layoutImages[0]" @click="index = 0" style="width:100%" />
        <gallery :images="layoutImages" :index="index" @close="index = null"></gallery>
      </div>
      <div class="tab-pane fade" id="media" role="tabpanel" aria-labelledby="contact-tab">
        <media :resortCode="resortCode" />
      </div>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
import facilities from "./facilities";
import directions from "./directions";
import gallery from "../../../shared/gallerySlideShow";
import AOS from "aos";
import "aos/dist/aos.css";
import media from "./media";

export default {
  components: {
    facilities,
    directions,
    gallery,
    media,
  },
  created() {
    AOS.init();
  },
  data() {
    return {
      index: null,
    };
  },
  props: {
    resortCode: {},
    resortCoords: {},
    layoutImages: {},
    resortName: "",
  },
};
</script>

<style lang="scss" scoped>
.nav-tabs li a {
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom-color: rgb(221, 221, 221);
}

.nav-tabs li :hover {
  background-color: rgb(27, 117, 187);
}

.nav-tabs li a.active {
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom-color: rgb(221, 221, 221);
}

.nav-tabs li a :hover {
  background-color: transparent;
  color: white;
}
</style>
