<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>
      <div class="grafting-text">
          <span class="blurb">
            <div>Rational loop grafting <a>beta</a>
            </div>
            <div  class="warning">Pre-release version</div>
          </span>
      </div>
      <TopNavigation class="navigation-diagram" />
    </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;
}

.blurb {
  text-transform: uppercase;
  float: left;
  position: relative;
  margin-bottom: 15px;
  font-size: 125%;
  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;
}

/*.textt {
  background: grey;
  justify-content: center;
  display: flex;
  margin-top: 5px;
  border-radius: 10px;
  padding: 2px;
  color: var(--neutral);
}*/
.text {
  /*justify-content: bottom;*/
  margin: 0 auto;
  margin-top: 5px;
  padding: 2px;
  float: left;
}

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

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

@media (min-width: 950px) {
  .loops-container {
    flex-direction: row;
  }
}
.navigation-diagram {
  margin-top: 5px;
  height: 80px;
  width: auto;
}

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