<template>
  <div class="m-table">
    <div class="m-table__header container mt-4 d-none d-lg-block">
      <div class="row justify-content-between bg-tertiary-10 rounded px-2">
        <slot
          name="tableHeader"
          :headers="headers" />
      </div>
    </div>

    <template v-if="$slots['loading'] && isLoading">
      <slot name="loading" />
    </template>

    <m-shadow-scroll
      v-if="!isLoading"
      id="listItems"
      class="m-table__list my-3 p-0"
      start-color="#fff"
      end-color="#ffffff00">
      <div
        v-for="item in items"
        :key="item.id"
        :item="item"
        class="m-list__item card border-0 container my-0 px-3 p-sm-0">
        <!-- HEADER -->
        <div
          :id="`headingItem${item.id}`"
          class="m-item__header card-header d-block d-lg-none p-0 border-0">
          <button
            :data-target="`#item${item.id}`"
            :aria-controls="`#item${item.id}`"
            class="m-item__button collapsed btn btn-block text-left border-0 rounded-0 m-0 p-0"
            type="button"
            text-left
            aria-expanded="false"
            data-toggle="collapse">
            <slot
              name="itemHeaderMobile"
              :item="item" />
          </button>
        </div>

        <!-- BODY -->
        <div
          :id="`item${item.id}`"
          class="collapse dont-collapse-lg m-0 p-0"
          :aria-labelledby="`#headingItem${item.id}`"
          data-parent="#listItems">
          <div class="m-item__body card-body p-0 m-0">
            <slot
              name="itemBody"
              :item="item" />
          </div>
        </div>
      </div>
    </m-shadow-scroll>
  </div>
</template>

<script>
import MShadowScroll from '../MShadowScroll/index.vue';

export default {
  name: 'MTable',

  components: {
    MShadowScroll,
  },
  props: {
    headers: {
      type: Array,
      required: true,
    },
    items: {
      type: Array,
      required: true,
    },
    isLoading: {
      type: Boolean,
      default: true,
    },
  },
};
</script>

<style lang="scss">

.m-table__list {
  height: 510px;
}

.m-list__item.card {
  .m-item__header.card-header,
  .m-item__body.card-body {
    margin-bottom: 0;

    background-color: #fff;
  }
}

@media (min-width: 992px) {
  .m-list__item.card {
    .m-item__header.card-header {
      margin-bottom: 0;

      background-color: #fff;
    }

    .m-item__button {
      pointer-events: none;
    }

    .collapse.dont-collapse-lg {
      display: block;

      height: initial;

      visibility: visible;
    }

  }
}
</style>
