<template>
  <footer class="status-bar">
    <div class="capped-width status-bar-content">
      <div class="msg">
        [<span v-if="getToken != null">
          Job: <span class="highlight">{{ getToken }}</span
          >.</span
        >
        Contact: <a href = "mailto: loopgrafter@sci.muni.cz" class="highlight">loopgrafter@sci.muni.cz</a>. ]
      </div>
      <Loading />
      <Ping />
    </div>
  </footer>
</template>

<script>
import { mapGetters, mapMutations } from "vuex";
import Ping from "./StatusBar/Ping";
import Loading from "./StatusBar/Loading";

export default {
  components: {
    Ping,
    Loading,
  },
  computed: {
    ...mapGetters([ "getToken", "exampleMode"]),
  },
};
</script>

<style scoped>
.status-bar {
  display: flex;
  position: fixed;
  bottom: 0px;
  width: 100%;
  background-color: var(--neutral);
  color: #808080;
  height: 1.5em;
}

.status-bar-content {
  display: flex;
}
.msg {
  flex: 1;
}
.highlight {
  color: var(--insert);
}
</style>