<template>
  <div class="container-fluid">
    <h2>Список баз</h2>
    <div
      v-if="isLoadingError"
      class="m-4 alert alert-danger d-flex align-items-center"
      role="alert"
    >
      <svg
        class="bi flex-shrink-0 me-2"
        width="32"
        height="32"
        role="img"
        aria-label="Danger:"
      >
        <use xlink:href="#exclamation-triangle-fill--sprite" />
      </svg>
      <span>Ошибка загрузки</span>
    </div>
    <div v-else-if="isLoading" class="container">
      <div class="spinner-border text-primary" role="status">
        <span class="visually-hidden">Loading...</span>
      </div>
    </div>
    <div v-else-if="0 == allInfobases.length" class="container">
      <div class="alert alert-warning" role="alert">
        <svg class="m-2" width="32" height="32">
          <use xlink:href="#exclamation-triangle-fill--sprite"></use>
        </svg>
        <span>Нет ни одной базы</span>
      </div>
    </div>
    <table v-else class="table table-striped">
      <colgroup>
        <col style="width: 3%" />
        <col style="width: 32%" />
        <col style="width: 50%" />
        <col style="width: 15%" />
      </colgroup>
      <thead>
        <tr>
          <th scope="col" class="col text-end">#</th>
          <th scope="col" class="col text-center">Имя</th>
          <th scope="col" class="col text-start">Ссылка</th>
          <th scope="col" class="col text-end">Действия</th>
        </tr>
      </thead>
      <tbody>
        <InfobaseListItem
          v-for="(infobase, index) in allInfobases"
          :key="infobase.name"
          :infobase="infobase"
          :index="index"
        />
      </tbody>
    </table>
    <div v-if="errorMessage" class="container">
      <div class="alert alert-danger d-flex align-items-center" role="alert">
        <svg
          class="bi flex-shrink-0 me-2"
          width="24"
          height="24"
          role="img"
          aria-label="Danger:"
        >
          <use xlink:href="#exclamation-triangle-fill--sprite" />
        </svg>
        <span v-text="errorMessage"></span>
      </div>
    </div>
  </div>
</template>

<script>
import "bootstrap-icons/icons/exclamation-triangle-fill.svg?sprite";
import { mapGetters } from "vuex";

import InfobaseListItem from "@/components/InfobaseListItem.vue";

export default {
  name: "InfobaseList",
  components: {
    InfobaseListItem,
  },
  computed: mapGetters([
    "allInfobases",
    "getInfobaseByName",
    "isLoading",
    "isLoadingError",
    "errorMessage",
  ]),
  methods: {},
  async mounted() {
    this.$store.dispatch("fetchInfobases");
  },
};
</script>