<template>
  <nav class="horizontal-menu">
    <ul class="capped-width menu-wrapper">
      <li>
        <a href="./"> Submit new job </a>
      </li>
      <li>
        <router-link :to="{ name: 'example' }"> Guided example </router-link>
      </li>
      <li>
        <router-link :to="{ name: 'usecase' }"> Help </router-link>
      </li>
      <li>
        <router-link :to="{ name: 'acknowledgement' }"> Acknowledgement </router-link>
      </li>
      <div class="job-finder">
        <input
          type="text"
          class="job-finder-input"
          v-model="jobId"
          placeholder="your-job"
          @keypress.enter="redirectToGraftStatus()"
        />
        <a @click="redirectToGraftStatus()" href="#"> Grafting results </a>
      </div>
    </ul>
  </nav>
</template>

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

export default {
  name: "HorizontalMenu",
  data() {
    return {
      jobId: "",
    };
  },
  methods: {
    ...mapActions(["setToken"]),

    redirectToGraftStatus() {
      console.log(this.jobId)
      this.setToken({token: this.jobId, override_example: true})
      this.$router.push({ name: "results-check", params: { jobId: this.jobId } });
    },
  },
};
</script>

<style scoped>
.horizontal-menu {
  background: var(--neutral);
  width: 100%;
  background-color: var(--cancel-grey);
  display: flex;
  justify-content: center;
}

.menu-wrapper {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.job-finder {
  margin-left: auto;
}

.job-finder-input {
  border-radius: 10px;
  margin-bottom: -5px;
  text-align: end;
  width: 10em;
  padding-right: 5px;
  margin-right: 5px;
}

a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 10px 10px;
  text-decoration: none;
}

a:hover {
  background-color: #111;
}
</style>