<template>
  <section>
    <div v-if="resorts.length > 0" class="row justify-content-md-center">
      <div class="col-lg-3 col-md-6 col-sm-6" v-for="resort in resorts" :key="resort.id">
        <div>
          <br />
          <div class="portfolio-item">
            <img
              v-if="resort.resortImage != ''"
              style="width:255px; height:255px; object-fit: cover;"
              :src="resort.resortImage"
              alt
            />
            <!-- <img
              v-else
              style="width:255px; height:255px; object-fit: cover;"
              src="../../../../public/img/blankImg.png"
              alt
            /> -->
            <p v-if="resort.weeksAvailable == 1" class="normalText">
              {{ resort.weeksAvailable }} Week Available
            </p>
            <p v-else-if="resort.weeksAvailable > 1" class="normalText">
              {{ resort.weeksAvailable }} Weeks Available
            </p>
            <p v-else class="noWeeks">No Weeks Available</p>
            <h4 class="mt-3">{{ resort.resortName }}</h4>
            <!-- <p>
                  Opposite Monument Park Spar, Pretoria! Secure Parking. A stand-alone building,
                  situated in the best location. Incredible bargain!
            </p>-->
            <br />

            <router-link
              class="btn-white-border"
              :to="`/resort/${resort.resortCode}`"
              :disable="resort.resortCode && resort.resortCode != ''"
              >VIEW</router-link
            >
          </div>
        </div>
      </div>
    </div>
    <div v-else class="row">
      <div align="center" class="col-md-12">
        <br />
        <img src="img/no-homes.png" />
        <br />
        <br />
        <p>Sorry no listings were found matching your search.</p>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  props: {
    resorts: {}
  }
};
</script>
