<template>
  <div v-if="show" class="modal-backdrop">
    <div class="modal">
      <div class="header">Whoopsie!</div>
      <div class="body">
        <p>
          LoopGrafter encountered an error and might misbehave if you decide to
          continue with this particular job. Here is what we know:
        </p>
        <div>
          <p class="importang-part">{{ getErrorRepresentation.shortForm }}</p>
          <p class="importang-part">{{ getErrorRepresentation.message }}</p>
        </div>
        <p>
          If you are not able to resolve this error yourself, send us an e-mail to
          <span class="email">loopgrafter@sci.muni.cz</span> specifying this
          error and your job id (<span class="jobId">{{ getToken }}</span
          >). We are not promising anything, but we might be able to help.
        </p>

        <text-label-button @click="show = false" class="msg-button"
          >OK&nbsp;:(</text-label-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import TextLabelButton from "./PanelButtons/TextLabelButton.vue";
export default {
  components: { TextLabelButton },
  data() {
    return {
      show: false,
    };
  },
  computed: {
    ...mapGetters(["getErrorRepresentation", "getToken", "getErrorCount"]),
  },
  watch: {
    getErrorCount(newValue, oldValue) {
      if (newValue > oldValue) {
        this.show = true;
      }
    },
  },
};
</script>

<style scoped>
.modal-backdrop {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal {
  border-radius: 5px;
  box-shadow: 2px 2px 20px 1px grey;
  overflow-x: auto;
  display: flex;
  flex-direction: column;
  max-width: 60%;
}
.header {
  background: var(--scaffold);
  padding: 4px 20px;
  color: white;
}
.body {
  background: var(--neutral);
  padding: 4px 20px;
}
.msg-button {
  width: 40px;
}
.email {
  color: var(--insert);
}
.jobId {
  color: var(--insert);
}
.importang-part{
    color: var(--scaffold);
}
</style>