<template>
  <footer class="status-bar">
    <div class="capped-width status-bar-content">
      <div class="msg">
        [Job: <span class="highlight">{{ getToken }}</span>.   Contact: <span class="highlight">loopgrafter@sci.muni.cz</span>. ]
      </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(["getBFactors", "getMessage", "getToken", "exampleMode"]),
  },
  methods: {
    ...mapMutations(["setExampleMode"]),
  },
};
</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>