<!DOCTYPE html>
<html lang="en">
 <head>
  <style>
   #app {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  padding: 2rem 0;
  flex-direction: column;
  background: #f5f5f5;
}

pre {
  background: #eee;
  padding: 1rem;
  border-radius: 5px;
}

.header {
  font-weight: 300;
  text-align: center;
}

.job_loop {
  width: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid #e5e5e5;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  background: #fff;
}

.job {
  padding: 1rem;
  color: #444;
  border-bottom: 1px solid #e5e5e5;
  border-left: 0.5rem solid transparent;
}
.job:hover, .job:focus {
  background: #f9f9f9;
  text-decoration: none !important;
}
.job:hover .title, .job:focus .title {
  color: #41B883;
}

.job.featured {
  border-left-color: #41B883;
}

.featured_text {
  margin-top: 0.35rem;
  margin-bottom: 0;
  background: #35495E;
  color: #fff;
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: 5px;
}

.no-more {
  text-align: center;
  padding: 1.5rem;
}
.no-more h6 {
  font-weight: 400;
  color: #bbb;
}
.no-more p {
  margin: 0;
  color: #41B883;
}

.job__footer {
  display: flex;
  margin-top: 1rem;
  color: #777;
}

.breaker:after {
  content: "|";
  margin: 0 0.5rem;
  color: #999;
}

a:hover, a:focus {
  text-decoration: none;
}

.main {
  color: #41B883;
}
  </style>
 </head>
 <body translate="no">
  <div id="app">
   <div class="container">
    <div class="row">
     <div class="col-xs-12">
      <h1 class="header display-5">
       Codepen Job Board in
       <span class="main">
        Vue Js
       </span>
      </h1>
      <br/>
      <div class="job_loop">
       <a :class="{ 'featured' : job.featured }" class="job" href="{{ job.url }}" target="_blank" v-for="job in jobs">
        <h5 class="title">
         {{ job.company_name }} - {{ job.title }}
        </h5>
        <p class="featured_text" v-if="job.featured_text">
         {{ job.featured_text }}
        </p>
        <div class="job__footer">
         <div :class="{ 'breaker' : job.address.state_prov || job.address.city }" class="footer__item">
          <span v-if="job.address.city">
           {{ job.address.city }}
          </span>
          <span v-if="job.address.state_prov">
           , {{ job.address.state_prov }}
          </span>
         </div>
         <div class="footer_item">
          {{ job.term }}
         </div>
        </div>
       </a>
       <div class="no-more">
        <h6>
         No more Jobs :/
        </h6>
        <p>
         New Jobs added daily!
        </p>
       </div>
      </div>
     </div>
    </div>
    <div class="col-xs-12 text-xs-center m-t-2">
     <p class="text-muted">
      I did not write this Jobs JSON API, Codepen did.
     </p>
    </div>
   </div>
  </div>
 </body>
</html>
