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

<!--NAVIGATION BAR-->
<header id="main-header" class="py-2 bg-light text-black ">
  <h1>Browse Project</h1>
</header>
<!--SEARCH BAR-->
<section id="search_bar">
  <div class="container mt-5">
    <div class="row">
      <div class="col-md-6 offset-md-3">
        <div class="card transparent-container">
          <div class="card-header text-center login-card-header">
   <form action="/project/all/all/1" method="POST">
          <select name="filter" class="form-control">
            <option selected disabled>Select Option...</option>
            <option  name="name">Title</option>
            <option  name="mentor">Mentor</option>
            <option  name="domain">Domain</option>
          </select>
        </div>
        
         <div class="form-group">
          <input name="searchName"  type="text" class="form-control" placeholder="Search Project">
        </div>
        
         <div class="form-group">
          <input type="submit" class="addc-btn" value="Search">
        </div>
      </div>
    </form>
  </div>
</section>

<% include partials/alerts %>

<!--PROJECT-->
<section id="browse_project" class="mt-5">
  <div class="card container transparent-container">
    <div class="row">
    <% for(var i = 0; i < project.length; i++) { %>
    <div class="card transparent-container col-md-3 text-center">
          <div class="card-body">
            <h5 class="card-title"> <%=project[i].name%> </h5>
            <p class="text-muted">
              <small class="text-muted">Mentor : <%=project[i].mentor%></small>
            </p>
            <p class="text-muted">
              <small class="text-muted">Domain : <%=project[i].domain%></small>
            </p>
            <a href="/project/details/<%=project[i]._id%>" class="addc-btn">Details</a>
            
            
          </div>
        </div>
        <% } %>
    </div>
    <% if (pages > 0) { %>
      <nav class="ml-3 mb-2">
        <ul class="pagination offset-md-3">
          
          <% if (current == 1) { %>
            <li class="page-item disabled"><a class="page-link">First</a></li>
          <% } else { %>
            <li class="page-item"><a href="/books/<%=filter%>/<%=value%>/1" class="page-link">First</a></li>
          <% } %>
          
          <% var i = (Number(current) > 5 ? Number(current) - 4 : 1) %>
                  <% if (i !== 1) { %>
                      <li class="page-item disabled"><a class="page-link">...</a></li>
                  <% } %>
                  <% for (; i <= (Number(current) + 4) && i <= pages; i++) { %>
                      <% if (i == current) { %>
                          <li class="page-item active"><a class="page-link"><%= i %></a></li>
                      <% } else { %>
                          <li class="page-item"><a class="page-link" href="/books/<%=filter%>/<%=value%>/<%= i %>"><%= i %></a></li>
                      <% } %>
                      <% if (i == Number(current) + 4 && i < pages) { %>
                          <li class="page-item disabled"><a class="page-link">...</a></li>
                      <% } %>
                  <% } %>
                  <% if (current == pages) { %>
                      <li class="page-item disabled"><a class="page-link">Last</a></li>
                  <% } else { %>
                      <li class="page-item"><a href="/books/<%=filter%>/<%=value%>/<%= pages %>" class="page-link">Last</a></li>
                  <% } %>
        </ul>
      </nav>
   <% } %>
  </div>
</section>

<% include partials/footer %>