<%- include('partials/html-start.ejs') %>
  <link rel="stylesheet" href="/styles/styles.css">



<!-- Navbar -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <p class="navbar-brand ps-3"></p>
  <h1 class="navbar-brand">Quebec Lab</h1>

  <ul class="navbar-nav">
      <li class="navitem"><a class="nav-link" href="https://gist.github.com/barrycumbie/978e0a8f517669733f61d44008e6924c" target="_blank">Quebec Story Card</a> </li>
      <li class="navitem"><a class="nav-link" href="https://github.com/bcoan2/improved-barnacle-quebec" target="_blank">My Quebec Repo</a> </li>

  </ul>

</nav>

<!-- Title bar -->
<div class="row">
  <div id="titleBar" class="col-md-8 offset-md-2">
    <h1 style="color:white;"  class="text-center">Brody's Jobs App!</h1>
    <div style="text-align: center;">
    </div>
  </div>
</div>



<!-- Card to add job with origin and todo for the job -->
  <div class="container-fluid">
    <div class="row">
      <div class="col d-flex justify-content-center col-md-3">
        <div class="card m-8 bg-secondary text-white">
          <div class="card-body">
            <h2>
              Current Jobs: <%= jobData.length %>
            </h2>
            <h3>Add a New Job</h3>
            <form method="POST" action="/addJob">
              <input type="hidden" name="_csrf" value="<%= csrfToken %>">
              <input name="jobName" placeholder="New job name">
              <input name="origin" placeholder="Job origin">
              <input name="todo" placeholder="To-Do for the job">
              <input type="submit" value="Add a new job" />
            </form>
          </div>
        </div>
      </div>

      <!-- Card that displays the job and button to delete it -->
      <div class="col d-flex justify-content-center" class="col-md-3">
        <div class="container-fluid">
          <div class="card m-4 bg-secondary text-white">
            <h4 class="card-title">Brody's Jobs</h4>
            <div class="card-body">
              <table class="table">
                <thead>
                  <tr>
                    <th scope="col">Job Name</th>
                    <th scope="col">Origin</th>
                    <th scope="col">To-Do</th>
                    <th scope="col">Actions</th>
                  </tr>
                </thead>
                <tbody>
                  <% for (var i = 0; i < jobData.length; i++) { %>
                    <tr>
                      <td>
                        <form id="updateForm<%= i %>" method="POST" action="/updateJob">
                          <input type="hidden" name="devId" value="<%= jobData[i]._id %>">
                          <input type="hidden" name="_csrf" value="<%= csrfToken %>">
                          <input type="text" name="jobName" value="<%= jobData[i].jobName %>">
                      </td>
                      <td>
                        <input type="text" name="origin" value="<%= jobData[i].origin %>">
                      </td>
                      <td>
                        <input type="text" name="todo" value="<%= jobData[i].todo %>">
                      </td>
                      <td>
                          <button class="btn btn-primary" type="submit" form="updateForm<%= i %>">Update Job</button>
                        </form>
                        <form method="POST" action="/deleteJob">
                          <input type="hidden" name="devId" value="<%= jobData[i]._id %>">
                          <input type="hidden" name="_csrf" value="<%= csrfToken %>">
                          <button class="btn btn-danger" type="submit">Delete Job</button>
                        </form>
                      </td>
                    </tr>
                  <% } %>
                </tbody>
              </table>
            </div>
            </thead>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>


  <!-- Ole Footer -->
  <div>
    <footer class="mt-5 p-4 bg-dark text-white text-center">
      <p>
        <a href="https://gist.github.com/barrycumbie/bbf76cb219a3e7579de1607d7e91fceb" class="card-link"
          target="cis486">|ðŸš€ CIS 486 ðŸš€|</a>
        <a href="https://github.com/bcoan2" class="card-link" target="github">|ðŸ˜€ My Github Profile ðŸ˜€|</a>
        <a href="https://www.codecademy.com/profiles/bcoan2" class="card-link" target="codecademy">|ðŸŽ“ My Codecademy
          Profile ðŸŽ“|</a>
        <a href="https://www.linkedin.com/in/brody-coan-185925269/" class="card-link" target="linkedin">|ðŸ’» My LinkedIn
          ðŸ’»|</a>
      </p>
    </footer>
  </div>

  <%- include('partials/html-end.ejs') %>