<template>
  <header id="loops-header">
    <div class="loops-container row">
      <div class="logo-without-text">
        <a href="./">
          <img id="logo" src="../../assets/LOOP_GRAFTER_logo.svg" />
        </a>
        <div class="version-div">
          <div class="version-number">v1.0</div>
        </div>
      </div>
<!-- 
      <div class="grafting-text">
        <span class="blurb">
          <div>Rational loop grafting <a>beta</a></div>
          <div  class="warning">Pre-release version</div>
        </span>
      </div>
      <div class="vl"></div> -->

      <TopNavigation class="navigation-diagram" />
      <!-- <div class="vl"></div> -->
      <div class="lab-logos">
        <a href="https://loschmidt.chemi.muni.cz/peg/" target="_blank">
          <img id="llogo" src="../../assets/ll_logo.png" />
        </a>
        <a href="https://visitlab.fi.muni.cz/" target="_blank">
          <img id="llogo" src="../../assets/visitlab_logo.png" />
        </a>
      </div>
    </div>
    <div class="v-divider"></div>
  </header>
</template>

<script>
import TopNavigation from "../Header/TopNavigation";
export default {
  name: "LoopsHeader",
  components: {
    TopNavigation,
  },

  computed: {
    descriptionText() {
      let text = require(`../../assets/resources/process-description.res.htm`);
      return text.default;
    },
  },
};
</script>

<style scoped>
.hint {
  margin-right: 3px;
  float: left;
  position: relative;
  vertical-align: bottom;
}
#loops-header {
  background: #eeeeee;
  padding-top: 10px;
  margin-bottom: 0px;
  /* vertical-align: bottom;*/
}
.warning {
  color: var(--scaffold);
  font-size: small;
}
#logo {
  height: 80px;
}
#llogo {
  height: 60px;
  padding: 10px;
}

.blurb {
  text-transform: uppercase;
  float: left;
  position: relative;
  margin-bottom: 22px;
  font-size: 100%;
  color: var(--cancel-grey);
}

.blurb a {
  color: var(--insert);
}

.grafting-text {
  display: flex;
  justify-content: center;
  float: left;
  vertical-align: bottom;
  align-items: flex-end;
  text-align: bottom;
}

.text {
  /*justify-content: bottom;*/
  margin: 0 auto;
  margin-top: 5px;
  padding: 2px;
  float: left;
}

.version-div {
  position: relative;
  margin-left: 0px;
  padding-left: 0px;
  min-width: 80px;
}

.version-number {
  position: absolute;
  bottom: 22px;
  font-size: 100%;
  color: var(--cancel-grey);
}

.logo-without-text {
  display: flex;
  justify-content: center;
}

.logo-without-text img {
  margin: 0 auto;
  display: flex;
  justify-content: center;
  float: left;
}

.loops-container {
  display: flex;
  justify-content: space-evenly;
  flex-direction: column;
}

.vl {
  display: none;
}

@media (min-width: 1200px) {
  .loops-container {
    flex-direction: row;
    /* justify-content: center; */
  }
  .vl {
    display: block;
    border-left: 1px solid var(--cancel-grey);
    height: 85px;
  }

}
.navigation-diagram {
  /* margin-top: 5px; */
  height: 80px;
  width: auto;
  min-width: 360px;
  padding: 5px;
  margin: 0vh 10vh;
}

.v-divider {
  width: 100%;
  height: 10px;
  background: var(--gradient);
  /*border-bottom: 1px solid var(--neutral);*/
}

.lab-logos {
  display: flex;
  justify-content: center;
}
</style>