<div id="app">
  <div class="jobs" id="jobs">
  </div>
</div>

#app {
  font-family: -apple-system,system-ui,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'calt' 0;
  overflow-x: hidden;
  background: #eee
}

.jobs {
  width: 50%;
  margin: auto;
  padding: 1rem;
}
.card {
  width: 100%;
    padding: 1.5rem;
    border-radius: 5px;
    transition: all 0.2s cubic-bezier(0.41, 0.094, 0.54, 0.07) 0s;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(238, 238, 238);
    box-shadow: rgba(0, 0, 0, 0.05) 1px 2px 4px;
    backface-visibility: hidden;
    background-color: rgb(255, 255, 255);
    border-image: initial;
    margin-bottom: 1.5rem;
}
.content {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    text-decoration: none;
    color: #000;
    position: relative;
}

.info {
    flex: 1 1 auto;
}

.info__company {
    color: #4badad;
    font-size: 14px;
    letter-spacing: 1px;
    font-weight: 600;
}

.info__title {
    margin: 1rem 0 0.5rem 0;
    max-width: 22rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 700;
    font-size: 22px;
    line-height: 24px;
}

.info_details {
    display: flex;
    justify-content: flex-start;
    padding: 0;
    list-style: none;
    color: rgba(151, 153, 157, 0.7);
    margin: 0;
    font-size: 14px;
    letter-spacing: 1px;
}

.details__item {
    margin-right: 1rem;
    max-width: 8rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.skills {
    margin-top: 1rem;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.skills__item {
    border: 1px solid #4badad;
    color: #4badad;
    border-radius: 2px;
    margin: 4px 6px 2px 0;
    padding: 5px 8px;
    background-color: #fff;
    font-size: 12px;
    border-radius: 2px;
    transition: .4s;
    cursor: pointer;
    display: flex;
    align-items: center;
}

const axiosHrflow = axios.create({
  baseURL: 'https://api.hrflow.ai/v1',
  headers: {
    'X-API-KEY': 'askr_07106bbd5bc856f7e9656e0ee652cfc4'
  }
});

const  buildQueryString =  (url, queryObject) => {
  let queryString = `${url}?`;
  Object.keys(queryObject).forEach(item => {
  if (typeof queryObject[item] === 'string'
      || queryObject[item] instanceof String) {
    queryString += `${item}=${queryObject[item]}&`;
  } else {
    queryString += `${item}=${JSON.stringify(queryObject[item])}&`;
  }
});
    return queryString; 
}

const displayJobs = jobs => {
  const jobsListHtml =  jobs.map(job => {
    const name = job.name
    const location = job.location.text
    const company = job.tags.filter(tag => tag.name === 'company')[0] && 
          job.tags.filter(tag => tag.name === 'company')[0].value || '';
    const category = job.tags.filter(tag => tag.name === 'category')[0] && 
          job.tags.filter(tag => tag.name === 'category')[0].value || '';
    const type = job.tags.filter(tag => tag.name === 'type')[0] && 
          job.tags.filter(tag => tag.name === 'type')[0].value || '';
    return (
      `<div class="card" key={job.key}>
        <div class="content">
          <div class="info">
            <div class="info__company">
              ${company}
            </div>
            <div class="info__title">
              ${name}
            </div>
            <div class="info__details">
              <span class="details__item">
                <i class="icon fa fa-map-marker-alt"></i>
                ${location}
              </span>
              <span class="details__item">
                <i class="icon fa fa-briefcase"></i>
                ${category}
              </span>
              <span class="details__item">
                <i class="fa fa-file-alt"></i>
                ${type}
              </span>
            </div>
            <div class="skills">
              ${job.skills.map(skill => {
                return (`<span key=${skill.name} class="skills__item">
                          ${skill.name}
                         </span>`
                        )
                  }).join(' ')
                }
             </div>
            </div>
          </div>
        </div>`
    )
  }).join(' ');
  const appElmt = document.getElementById('jobs');
  appElmt.innerHTML = jobsListHtml
}

const query = {
   board_keys: ['3eaf4da328a8c794fb806e6fb839688d8b3f536e'],
   tags_included: [[], []],
   name: "",
   limit: 10,
   page: 1,
   sort_by: 'searching',
   order_by: 'asc',
   location_distance: 30,
   location_geopoint: {},
   use_agent: 0,
   totalPage : 0,
   status: true,
 }

 const url = buildQueryString('jobs/searching', query);

axiosHrflow.get(url)
  .then( res => {
  const fetchedJobs = { 
    jobs: res.data.data.jobs,
    meta: res.data.meta
  }
  displayJobs(fetchedJobs.jobs);
}).catch( err => {
  console.log('error', err)
});