<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">
          <a class="nav-link" href="/jobs">Jobs</a>
        </div>
        <div class="nav-item">
          <a class="nav-link" href="/bookmarks">Bookmarks</a>
        </div>
        <div class="nav-item">
          <a class="nav-link" href="/about">About Us</a>
        </div>
      </nav>
      <div class="selectors">
        <select class="bluefire-selector" id="selHeaderCountry">
          <option value="">All Countries</option>
        </select>
        <select class="bluefire-selector" id="selHeaderCity">
          <option value="">All Cities</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">
          <a class="nav-link" href="/signin">Sign In</a>
        </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>

<style>
@import 'assets/css/fonts.css';
@import 'assets/css/bluefire.css';
</style>
