<!doctype html>
<html lang="en">

<head>
  <title>Student Find Jobs - High School JobFinder</title>

  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
    integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"
    integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

  <!-- <link rel="stylesheet" href="../style.css"> -->
  <link rel="stylesheet" href="../findjobs.css">

  <link rel="stylesheet" href="../style.css">

  <link rel="stylesheet" href="../signup.css">

</head>

<body>

  <!-- navigation bar -->
  <nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="">High School JobFinder</a>

    <ul class="navbar-nav mr-auto ml-3">
      <a class="nav-item nav-link active" href="/student-portal/student-findjobs">Find Jobs</a>
      <!-- <a class="nav-item nav-link" href="/student-portal/student-bookmarks">Bookmarks</a> -->
      <a class="nav-item nav-link" href="/student-portal/student-myapplications">My Applications</a>
      <a class="nav-item nav-link" href="/resources">Resources</a>
      <a class="nav-item nav-link" href="/helpcenter">Help Center</a>
    </ul>

    <ul class="navbar-nav ml-auto mr-3">
      <li class="nav-item dropdown">

        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
          aria-haspopup="true" aria-expanded="false">
          Account
        </a>

        <div class="dropdown-menu bg-dark" aria-labelledby="navbarDropdownMenuLink">
          <a class="nav-item nav-link" href="/student-portal/student-viewprofile">Edit Account</a>
          <a class="nav-item nav-link" href="/logout">Logout</a>
        </div>

      </li>
    </ul>
  </nav>


  <script>
    // stringify the data passed from router to ejs (within the EJS template only)
    var jobpost = <%- JSON.stringify(result) %>
  </script>

<style>
  .content_center {
  display: flex;
  justify-content: center;
  align-items: center; 
  width: 100%;
  height: 100%;
}
</style>

  <div class="container mt-5 justify-content-center align-items-center">

    <!-- job search bar (with dropdowns) -->
    <form class="form-inline " action="/search" method="GET">
      <div class="form-group col-auto my-1 ">
        <input type="text" class="form-control-lg" size="50" id="term" name="term" value="<%=term%>"
          placeholder="Job Title">
      </div>

      <div class="form-row align-items-center">
        <div class="col-auto my-1">
          <!-- <label class="mr-sm-2" for="inlineFormCustomSelect">Preference</label> -->
          <select class="content_center mr-sm-2 form-control form-control-lg border border-dark" name="discipline" id="discipline">
            <option selected disabled>Discipline</option>
            <option value="technology" <% if((discipline).includes("technology")){ %> selected <% } %>>Technology
            </option>
            <option value="retail" <% if((discipline).includes("retail")){ %> selected <% } %>>Retail</option>
          </select>
        </div>
      </div>

      <div class="form-row align-items-center">
        <div class="col-auto my-1">
          <!-- <label class="mr-sm-2" for="inlineFormCustomSelect">Preference</label> -->
          <select class="content_center mr-sm-2 form-control form-control-lg border border-dark" name="type" id="type">
            <option selected disabled>Type</option>
            <option value="coop" <% if((type).includes("coop")){ %> selected <% } %>>Coop</option>
            <option value="regular" <% if((type).includes("regular")){ %> selected <% } %>>Regular</option>
          </select>
        </div>
      </div>

      <button type="submit" class="btn btn-primary btn-lg col-auto my-1">Search</button>
    </form>
</div>

<div class="container" style="margin:0%">

  <div class="row justify-content-md-center">

    <!-- displays the previews of the job posts that match the search (with view button) -->
    <div class="col mr-auto" style="width:600px;">
    <% var x=0 %>
      <% if (result) { %>
        <% result.forEach(p=> { %>
          <br>
          <div class="text-dark ml-3" style="width: 600px; background-color: white;">
          
              <a href="student-portal/student-employerprofile?employerID=<%= p.creatorID %>">
                <%= p.creatorName %>
              </a>
            <br>

              Title: <%= p.jobTitle %>

            <br>

              Location: <%= p.location %>
            <br>

              Type: <%= p.type %>

            <br>

              Company Name: <%= p.companyName %>

            <br>

              Brief Description: <%= p.briefDescription %>

            <br>
            
            <button class="btn btn-primary" onclick="display(jobpost[<%=x%>])"> View </button>
          </div>

          <% x++ }) %>
            <% } %>
          </div>

          <div class="col-5 mt-auto" style="margin-right:auto;">

            
              <div class="fullPost text-dark ml-auto" style="width: 600px; background-color: white;">

            </div>

</div>

  </div>

</div>

  
<!-- displays the full version of the selected job post (with apply button) -->
  <script>
      function display(jobpost) {

        $("div.fullPost").html

          ("<br>" +
          '<p class="font-weight-bold mb-0" style="display:inline"> Title: </p>' + jobpost.jobTitle + "<br>" +
            '<p class="font-weight-bold mb-0" style="display:inline"> Location: </p>' + jobpost.location + "<br>" +
            '<p class="font-weight-bold mb-0" style="display:inline"> Type: </p>' + jobpost.type + "<br>" +
            '<p class="font-weight-bold mb-0" style="display:inline"> Discipline: </p>' + jobpost.discipline + "<br>" +
            '<p class="font-weight-bold mb-0" style="display:inline"> Description: </p>' + jobpost.description + "<br>" +
            '<p class="font-weight-bold mb-0" style="display:inline"> Responsibilities: </p>' + jobpost.responsibilities + "<br>" +
            '<p class="font-weight-bold mb-0" style="display:inline"> Skills: </p>' + jobpost.skills + "<br>" +
            '<p class="font-weight-bold mb-0" style="display:inline"> Posted On: </p>' + jobpost.createdAt + "<br>" +
            '<form action="/student-portal/student-applications" method="GET">' +
            '<input type="hidden" id="postID" name="postID" value=' + jobpost._id + '>' +
            '<button class="btn btn-primary">Apply</button>')
      }
  </script>


  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
    integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
    integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
    crossorigin="anonymous"></script>
</body>

</html>