<script>
import {Fragment} from "vue-fragment"
import ContentSpan from "~/components/atoms/utility/ContentSpan";
import SquareCard from "~/components/atoms/card/SquareCard";

export default {
  props: {
    length: {type: Number, default: 0},
    is_loading: {type: Boolean},
    is_error: {type: Boolean, default: false},
  },
  components: {
    SquareCard,
    ContentSpan,
    Fragment
  },
}
</script>
<template>
  <fragment>
    <square-card v-show="is_loading" :has_border="true" :has_shadow="false">
      <content-span/>
    </square-card>

    <square-card v-show="!is_loading && is_error" :has_border="true" :has_shadow="false">
      <content-span caption="Gagal memuat data" :has_animation="false"/>
    </square-card>

    <square-card v-show="!is_loading && !is_error && length === 0" :has_border="true" :has_shadow="false">
      <content-span caption="Data belum tersedia" :has_animation="false"/>
    </square-card>

    <square-card v-show="!is_loading && !is_error && length > 0" :has_border="true" :has_shadow="false">
      <slot/>
    </square-card>
  </fragment>
</template>