<template>
  <div class="page">
    <header>
      <div class="logo">
        <router-link to="/">
          <img src="../assets/images/HeaderLogo.png">
        </router-link>
      </div>
      <div class="sublogo">
        Careers
      </div>
      <nav class="nav">
        <div class="nav-item">
          <router-link class="nav-link" to="/jobs">Jobs</router-link>
        </div>
        <div class="nav-item">
          <router-link class="nav-link" to="/bookmarks">Bookmarks</router-link>
        </div>
        <div class="nav-item">
          <router-link class="nav-link" to="/about">About Us</router-link>
        </div>
      </nav>
      <div class="selectors">
        <select class="bluefire-selector" id="selHeaderCountry" :value="countryId" @change="changeCountry">
          <option value="0">All Countries</option>
          <option v-for="country in $store.state.countries" :key="country.CountryID" :value="country.CountryID">{{ country.CountryName }}</option>
        </select>
        <select class="bluefire-selector" id="selHeaderCity" :value="cityId" @change="changeCity">
          <option value="0">All Cities</option>
          <option v-for="city in $store.state.cities" :key="city.CityID" :value="city.CityID">{{ city.CityName }}</option>
        </select>
      </div>
      <div class="search">
        <input type="text" id="txtSearch" class="header-search" placeholder="Search for position"/>
        <a class="button-search" href="#">
          <img src="../assets/images/search-icon.png" alt="Search">
        </a>
      </div>
      <div class="account nav">
        <div class="nav-item">
          <router-link class="nav-link" to="/login">Sign In</router-link>
        </div>
      </div>
    </header>
    <div>
      <router-view/>
    </div>
    <footer>
      <div class="main-footer">
        <div class="logo">
          <img src="../assets/images/HeaderLogo.png">
        </div>
        <div class="sublogo">
          Careers
        </div>
        <div class="contact">
          <p>Contact Us at +62888123123</p>
          <p>Leave a Message</p>
        </div>
      </div>
      <div class="copyright">
        2020. All Rights Reserved.
      </div>
    </footer>
  </div>
</template>
<script>
import { mapState } from 'vuex';

export default {
  computed: mapState(["countryId","cityId"]),
  methods: {
    changeCountry(e) {
      this.$store.commit('setCountryId',e.target.value);
    },
    changeCity(e) {
      this.$store.commit('setCityId',e.target.value);
    },
  }
}
</script>
<style>
</style>
