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

  <div class="jumbotron jumbotron-fluid" style="background-image: url(background2.svg); background-repeat: no-repeat; background-position: center;" >
    <div class="container">
      <div class="row" style="margin-top: 100px; margin-bottom: 50px;">
        <div class="col-lg-12">
          <h1 style="text-align: center; margin-top: 0px;  justify-content: center; font-weight: 800;">Welcome !!</h1>
        </div> 
      </div>
    </div>
  </div>

    <div class="jumbotron" style="background-color: white;">
      <div class="row">
        <% if (members.length > 0) { %>
          <% members.forEach(pp => { %>
            <% if (pp.role =="M") { %>
        <div class="col-lg-3 col-md-6 col-sm-12">
          <div class="card" style="width: 18rem;">
            <% if(pp.user_image) { %> 
              <img class="card-img-top" src="<%=pp.user_image%>" style="width: 100%;" alt="Card image cap">
            <% }else {%>
              <img class="card-img-top" src="avatar.svg" style="width: 100%;" alt="Card image cap">
              <% } %>  
            <div class="card-body">
              <h5 class="card-title" style="color: rgb(255, 0, 51); font-weight: 800; text-align: center; text-transform: capitalize;" ><%=pp.name%></h5>
              <a href="mailto:<%=pp.mail_id%> " style=" color: black;"><i class="fa fa-envelope" style="font-size:36px; margin-left: 30px;"><p></p></i></a>
              <a href="<%=pp.gitlink %> " style=" color: black;"><i class="fa fa-github-square" style="font-size:36px;  margin-left: 30px;" aria-hidden="true"></i></a>
              <a class="delete" data-doc="<%= pp._id %>">
                <img src="/trashcan.svg" style="font-size: 36px;" alt="delete icon">
              </a>
              </div>              
            </div>
          </div>
          <% } %> 
        
        <% }) %>
            <% } else { %>
              <p style="text-align: center; font-weight: 800; "><span style="text-align:center">There are no members to display at this Moment :)</span></p>
          <% } %>
      </div>
    </div>
  </div>

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




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


    <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>