<!DOCTYPE html>
<html lang="en">
  <head>
    <%- include('partials/header') %>
  </head>
  <body>
    <%- include('partials/nav') %>
    <div class="container text-center page-header mt-3 mb-3">
      <h3>MongoDB Database Example</h3>
    </div>
    <div class="container page-form">
      <div class="row">
        <div class="col-md-3"></div>
        <div class="col-md-6">
          <form class="row">
            <div class="col-md-6">
              <label class="form-label">First name</label>
              <input type="text" class="form-control" id="firstname" placeholder="Firstname">
            </div>
            <div class="col-md-6">
              <label class="form-label">Last name</label>
              <input type="text" class="form-control" id="lastname" placeholder="Lastname">
            </div>
            <div class="col-12 mt-3">
              <label class="form-label">Username</label>
              <input type="text" class="form-control" id="username" placeholder="Username">
            </div>
            <div class="col-12 text-center">
              <button id="add-user" class="btn btn-primary mt-3 mb-3">Submit</button>
            </div>
          </form>
        </div>
        <div class="col-md-3"></div>
      </div>
    </div>
    <div class="container text-center">
      <div class="row">
        <table class="table">
          <thead>
            <tr>
              <th scope="col">#</th>
              <th scope="col">User</th>
              <th scope="col">First</th>
              <th scope="col">Last</th>
            </tr>
          </thead>
          <tbody>
            <% users.forEach((user, index) => { %>
            <tr>
              <th scope="row"><%= index+1 %></th>
              <td><%= user.username %></td>
              <td><%= user.firstname %></td>
              <td><%= user.lastname %></td>
            </tr>
            <% }) %>
          </tbody>
        </table>
      </div>
      <div class="row justify-content-center mt-5">
        <div class="col-md-3">
          <form> 
            <label class="form-label">User ID to delete</label>
            <input type="number" class="form-control" id="user-id" placeholder="User ID">
          </form>
        </div>
        <div class="col-md-3">
          <button id="delete-user" class="btn btn-danger mt-3 mb-3">Delete User</button>
        </div>
      </div>
      
    </div>

    <%- include('partials/footer') %>

    <script>
      $(document).ready( function() {
        $('#add-user').click( function() {
          $.post('/addUser', {
            username: $('#username').val(),
            firstname: $('#firstname').val(),
            lastname: $('#lastname').val(),
          });
        });

        $('#delete-user').click( function() {
          $.delete('/deleteUser', {
            userID: $('#user-id').val() + 1,
          });
        });
      });
    </script>
  </body>
</html>
