<!DOCTYPE html>
<html lang="en">
<%- include('./partials/head') %>

  <body style="overflow-x: hidden;">
    <%- include('./partials/nav') %>

    <div class="jumbotron jumbotron-fluid " style="background-color: rgba(17, 146, 133, 0.199); margin-top: 40px; padding-top: 70px; padding-bottom: 10px;">
      <div class="row">
        <div class="col-lg-6 col-md-12 col-sm-12 " style="background-image: url('/uploads.svg');">
          <img src="/upload.svg" alt="Picture"
            style="  display: block; margin-left: auto; margin-right: auto; width: 40%; ">
        </div>
        <div class="col-lg-6 col-md-12 col-sm-12 ">
          <h1 class="display-4 zoom" style="margin-top: 40px; font-weight: 800;">&Wopf;ELCOME BACK !!</h1>
          <p class="lead">Note Store is a note-storing website for constraint-free sharing of your notes in the future.</p>
        </div>
      </div>
    </div>

    <h1 style="color: black; text-align: center; margin-top: 20px; font-weight: 800;">My Uploads</h1>

    <div class="jumbotron jumbotron-fluid" style="background-color: white; padding-left: 20px;">
      <div class="container-fluid">
        <div class="row">
          <% if (notes.length > 0) { %>
            <% notes.forEach(pp => { %>
              <% if (pp.contributer_id == user_id) { %>
                <div class="col-lg-3 col-md-6 col-sm-12">
                  <div class="card zoom2" style="width: 22rem; height: auto; background-color: rgb(40, 184, 174);">
                    <div class="card-body">
                      <h5 class="card-title"><%= pp.title %></h5>
                      <a href="/uploads/<%= pp._id %>"><button type="submit" class="btn btn-outline-dark"
                        style="transition: 0.4s; margin-right:20px ; margin-left: 30px;">View PDF</button></a>

                      <a class="delete" data-doc="<%= pp._id %>">
                        <img src="/trashcan.svg" alt="delete icon">
                      </a>
                    </div>
                  </div>
                </div>
              <% } %>
            <% }) %>
          <% } else { %>
            <p style="text-align: center; font-weight: 800; padding-top: -50px;">
              <span style="text-align:center">There are no Notes to display :( </span>
            </p>
          <% } %>
        </div>
      </div>
    </div>

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

    <script>
      const trashcan = document.querySelectorAll('a.delete');
      trashcan.forEach(item => {
        item.addEventListener('click', (e) => {
          const endpoint = `/${item.dataset.doc}`;
          fetch(endpoint, {
            method: 'DELETE',
          })
            .then(response => response.json())
            .then(data => window.location.href = data.redirect)
            .catch(err => console.log(err));
        });
      });
    </script>

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
      integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
      crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
      integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
      crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
      integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
      crossorigin="anonymous"></script>
  </body>
</html>
