extends layout

block content
  div
    h2 Mongoose Jobs
  
  style.
    .job {
      position: relative;
      cursor: pointer;
      border: 1px solid #eef0f1;
      padding: 15px;
      margin-bottom: 15px;
      border-radius: 4px;
      transition: all .2s ease-in-out;
    }

    .job .company-logo {
      vertical-align: top;
      display: inline-block;
      margin-top: 0.25em;
      margin-right: 0.75em;
    }

    .job .title {
      color: #0971B2;
    }

    .job .company-logo img {
      width: 60px;
      height: auto;
      border: 0px;
    }

    .job .description {
      display: inline-block;
      width: 600px;
      margin-top: 0.25em;
      cursor: pointer;
    }

    .job .company {
      font-weight: bold;
    }

    .job:hover {
      background-color: #eef0f1;
    }

    .job .at {
      color: #495057;
    }

    .post .title {
      font-size: 1.5em;
      margin-bottom: 0.25em;
    }

    .post .tags {
      margin-top: 1em;
    }

    .post .tags .tag {
      color: white;
      background-color: #208E96;
      border-radius: 3px;
      padding: 5px;
      margin-right: 0.5em;
    }

    .post .tags .tag a {
      color: white;
    }

    input[type="checkbox"] {
      display: none;
    }

    input + label + div + .job-description {
      display: none;
    }

    input:checked + label + div + .job-description {
      display: block;
    }

    .job-description .apply {
      font-size: 1.5em;
      padding-top: 0.75em;
      padding-bottom: 0.75em;
      margin-top: 0.75em;
      width: 180px;
      background-color: #4DBA13;
      text-align: center;
      border-radius: 4px;
      cursor: pointer;
      margin-left: auto;
      margin-right: auto;
      color: #495057;
    }

  div
    each job in jobs
      .post.job
        .company-logo
          img(src=job.logo)
        label.description(for='checkbox-' + job._id)
          input(id='checkbox-' + job._id, type="checkbox")
          label.title #{job.title}
          div.at
            span at
            span.company  #{job.company}
            span.location  • #{job.location} 
          div.job-description
            div !{job.description}

            a(href=job.url)
              div.apply Apply

  h2 Add Your Own
  div.
    Hiring Node.js and MongoDB developers?
    <a href="https://github.com/sponsors/mongoosejs">Sponsor Mongoose on GitHub to post your job here!</a>