<script>
import {Fragment} from "vue-fragment"
import PlainLabel from "~/components/atoms/label/PlainLabel";

export default {
  components: {PlainLabel, Fragment},
  props: {
    label: {type: String},
    is_connected: {type: Boolean, default: false},
    icon: {type: String, default: "bx bx-transfer"},
    is_available: {type: Boolean, default: true},
    logs : {type : String}
  }
}

</script>
<template>
  <div class="shadows rounded px-3 py-2 text-center bg-white">
    <div class="mini-stat-icon mb-2 avatar-sm mx-auto shadows rounded-circle overflow-hidden">
      <span class="avatar-title bg-light text-primary">
        <i :class="`${icon} font-size-24 z4`"></i>
        <span v-show="is_available" v-if="!is_connected" class="badge badge-danger badge-pill position-absolute z2"
              style="margin: -20px 0 0 20px">!</span>
      </span>

    </div>
    <plain-label :value="label" :is_bold="true" additional_class="pt-2" />
      <p v-if="is_available && is_connected" class="font-size-11 text-muted">
        <i class="bx bxs-circle text-success"></i> <plain-label value="Teroneksi"/> <br> &nbsp;
      </p>
      <p v-if="is_available && !is_connected"  class="font-size-11 text-muted">
        <i class="bx bxs-circle text-danger"></i> <plain-label value="Koneksi Terputus"/> <br> &nbsp;
        <plain-label :value="logs" additional_class="pt-2" />
      </p>
      <p v-if="!is_available" class="font-size-11 text-muted">
        <i class="bx bxs-circle text-muted"></i> <plain-label value="Tidak Tersedia"/> <br> &nbsp;
      </p>
  </div>
</template>