<template>
  <div>
    <div class="static-element-header">Reference</div>
    <div class="static-element">
      <div style="font-size: small">
        Planas-Iglesias J, Opaleny F, Ulbrich P, Stourac J, Sanusi Z, Pinto GP, Schenkmayerova A, Byska J, Damborsky J, Kozlikova B, Bednar D. (2022) LoopGrafter: A Web Tool for Transplanting Dynamical Loops for Protein Engineering. <em>In preparation</em>.
      </div>
    </div>

    <div class="static-element-header">User Statistics</div>
    <div class="static-element">
      <ul>
        <li>Number of visitors: {{ visitorsStats }}</li>
        <li>Number of jobs: {{ jobStats }}</li>
      </ul>
    </div>

    <div class="static-element-header">Contact</div>
    <div class="static-element">
      <div>Loschmidt Laboratories</div>
      <ul>
        <li><a href = "mailto:loopgrafter@sci.muni.cz">loopgrafter@sci.muni.cz</a></li>
        <li><a href = "https://loschmidt.chemi.muni.cz" target="_blank">loschmidt.chemi.muni.cz</a></li>
      </ul>
      <div>Visitlab Visualization Laboratory</div>
      <ul>
        <li><a href = "https://visitlab.fi.muni.cz" target="_blank">visitlab.fi.muni.cz</a></li>
      </ul>
    </div>

    <div class="static-element-header">Other tools</div>
    <div class="static-element">
      <a href="https://www.caver.cz/" target="_blank">
        <img class="logo" src="../assets/logos/caver_logo.png" />
      </a>
      <a href="https://loschmidt.chemi.muni.cz/predictsnp/" target="_blank">
        <img class="logo" src="../assets/logos/predictsnp_logo.png" />
      </a>
      <a href="https://loschmidt.chemi.muni.cz/fireprot/" target="_blank">
        <img class="logo" src="../assets/logos/fireprot_logo.png" />
      </a>
      <a href="https://loschmidt.chemi.muni.cz/hotspotwizard/" target="_blank">
        <img class="logo" src="../assets/logos/hsw_logo.png" />
      </a>
    </div>

    <div class="static-element-header">Acknowledgement</div>
    <div class="static-element">
      <a href="https://www.elixir-czech.cz/" target="_blank">
        <img class="logo_elixir" src="../assets/logos/elixir_logo.png" />
      </a>
    </div>
  </div>
</template>

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

export default {
  components: {},

  methods: {
    ...mapActions(["fetchStats"]),
  },
  computed: {
    ...mapGetters(["getVisitorsStats", "getJobStats"]),
    visitorsStats() {
      return this.getVisitorsStats ?? "...";
    },
    jobStats() {
      return this.getJobStats ?? "...";
    },
  },
  mounted() {
    this.fetchStats();
  },
};
</script>

<style scoped>
.logo {
  max-height: 45px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding: 5px 10px 0px 0px;
}

.logo_elixir {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-height: 85px;
  padding: 5px;
}

.static-element-header {
  /* min-height: 25px; */
  padding: 3px 10px;
}

.static-element {
  padding: 5px 10px;
}

ul {
  margin: 3px;
}

</style>
