<template>
  <main id="main" style="margin-top:200px; padding-bottom:50px">
    <div class="container">
      <div class="row">
        <div class="col">
          <div class="section-header">
            <h2>All Timeshare Weeks</h2>
          </div>
        </div>
      </div>
    </div>
    <div class="container-fluid">
      <div v-if="checkAccess" class="row">
        <div class="col-md-12">
          <timeshareList />
        </div>
      </div>
      <div v-else class="row">
        <div class="col">
          <alert :text="'You don\'t have permission to view this page'" :type="'ERROR'" />
        </div>
      </div>
    </div>
  </main>
</template>

<script>
/* eslint-disable */
import { mapState, mapActions, mapGetters } from "vuex";

import Log from "../../../assets/Log";
import alert from "../../shared/alert";
import timeshareList from "./timeshareAdminList";

export default {
  name: "TimeshareAdmin",
  components: {
    timeshareList,
    alert
  },
  computed: {
    ...mapState("timeshare", ["resorts", "regions", "seasons", "detailedRegion"]),
    ...mapState("individual", ["indiv"]),
    checkAccess() {
      if (Log.getUser().role === "Super Admin") {
        return true;
      } else {
        return false;
      }
    }
  }
};
</script>

<style>
.my-disable {
  background-color: silver;
  border-color: silver;
}
.my-disable:hover {
  background-color: lightgray;
  border-color: lightgray;
}
</style>
