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

  <body>




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

      <div class="jumbotron jumbotron-fluid " style="background-color: rgba(255, 174, 0, 0.199); margin-top: 40px;">
        <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's App is a notes storing website for contraint less sharing of your notes for 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;">
        <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(255, 145, 0);">
                      <div class="card-body">
                        <h5 class="card-title"><%= pp.title %></h5>
                        <a href="<%=pp.document_url%>"><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; "><span style="text-align:center">There
                          are no Notes to display :( </span></p>
                      <% } %>
          </div>
        </div>
      </div>





    


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

        <script>
          const trashcan = document.querySelector('a.delete');
          trashcan.addEventListener('click', (e) => {
            const endpoint = `/${trashcan.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>