<template>
  <div
    v-if="isApacheNeedRestart || isApacheRestartPending"
    class="
      container
      d-flex
      flex-row
      rounded
      bg-warning bg-gradient
      shadow
      p-3
      mt-lg-5
      w-50
    "
  >
    <span class="fw-bold m-auto me-2">Apache: </span>
    <span
      v-if="isApacheNeedRestart && !isApacheRestartPending"
      class="badge rounded-pill bg-danger m-auto"
      >Нужен перезапуск</span
    >
    <span
      v-if="isApacheRestartPending"
      class="badge rounded-pill bg-success m-auto"
      >Перезапуск</span
    >
    <span class="flex-fill"></span>
    <button
      v-if="isApacheRestartPending"
      type="button"
      class="btn btn-success btn-sm align-self-end shadow"
      @click.prevent="fetchApacheRestartFlag"
      title="Обновить статус"
      v-tooltip:top
    >
      Обновить
    </button>
    <button
      v-if="isApacheNeedRestart && !isApacheRestartPending"
      type="button"
      class="btn btn-danger btn-sm align-self-end shadow"
      @click.prevent="updateApacheRestartFlag"
      title="Перезапустить Apache"
      v-tooltip:top
    >
      Перезапустить
    </button>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";

export default {
  computed: mapGetters([
    "isApacheNeedRestart",
    "isApacheRestartPending",
    "isApacheRestartFlagSent",
  ]),
  methods: mapActions(["updateApacheRestartFlag", "fetchApacheRestartFlag"]),
  async updated() {
    this.fetchApacheRestartFlag();
  },
};
</script>
