<%- include("websitepartials/header") %>
  <main class="main">

    <!-- Page Title -->
    <div class="page-title dark-background"
      style="background-image: url(website-assets/img/gallery/Dr-Basilia-Igbokwe3.jpg);">
      <div class="container position-relative">
        <h1>Events</h1>
        <p>Discover upcoming academic, cultural, and sports events hosted by our institution.</p>
        <nav class="breadcrumbs">
          <ol>
            <li><a href="/">Home</a></li>
            <li class="current">Events</li>
          </ol>
        </nav>
      </div>
    </div>

    <!-- Events Section -->
    <section id="events-2" class="section py-5">
      <div class="container">
        <% if (events.length===0) { %>
          <p>No events available at the moment.</p>
          <% } else { %>
            <div class="row">
              <% events.forEach((event, index)=> { %>
                <div class="col-md-6 mb-4" data-aos="fade-up" data-aos-delay="<%= index * 100 %>">
                  <div class="card h-100 shadow-sm border-0">
                    <div class="card-body d-flex flex-column">
                      <div class="d-flex justify-content-between align-items-start mb-2">
                        <div class="event-date text-white text-center px-2 py-1 rounded bg-primary">
                          <div class="day fw-bold" style="font-size: 1.5rem;">
                            <%= new Date(event.date).getDate() %>
                          </div>
                          <div class="month text-uppercase" style="font-size: 0.75rem;">
                            <%= new Date(event.date).toLocaleString('default', { month: 'short' }) %>
                          </div>
                        </div>
                        <div>
                          <small class="text-muted"><i class="bi bi-clock"></i>
                            <%= event.startTime %> - <%= event.endTime %>
                          </small><br>
                          <small class="text-muted"><i class="bi bi-geo-alt"></i>
                            <%= event.location %>
                          </small>
                        </div>
                      </div>
                      <h5 class="card-title mb-2">
                        <%= event.title %>
                      </h5>
                      <p class="card-text text-truncate" style="max-height: 4.5em; overflow: hidden;">
                        <%= event.description %>
                      </p>
                      <button class="btn btn-sm btn-outline-primary mt-auto align-self-start" data-bs-toggle="modal"
                        data-bs-target="#eventModal<%= index %>">Read More</button>
                    </div>
                  </div>
                </div>

                <!-- Modal -->
                <div class="modal fade" id="eventModal<%= index %>" tabindex="-1"
                  aria-labelledby="eventModalLabel<%= index %>" aria-hidden="true">
                  <div class="modal-dialog modal-lg modal-dialog-centered">
                    <div class="modal-content">
                      <div class="modal-header bg-primary text-white">
                        <h5 class="modal-title text-white" id="eventModalLabel<%= index %>">
                          <%= event.title %>
                        </h5>
                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                          aria-label="Close"></button>
                      </div>
                      <div class="modal-body">
                        <p><strong>Date:</strong>
                          <%= new Date(event.date).toDateString() %>
                        </p>
                        <p><strong>Time:</strong>
                          <%= event.startTime %> - <%= event.endTime %>
                        </p>
                        <p><strong>Location:</strong>
                          <%= event.location %>
                        </p>
                        <hr>
                        <p>
                          <%= event.description %>
                        </p>
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                      </div>
                    </div>
                  </div>
                </div>
                <% }) %>
            </div>
            <% } %>

              <!-- Pagination -->
              <div class="pagination-wrapper pt-4" data-aos="fade-up" data-aos-delay="400">
                <ul class="pagination justify-content-center">
                  <% const currentPage=parseInt(req.query.page || 1); const totalPages=Math.ceil(total / 6); %>
                    <li class="page-item <%= currentPage === 1 ? 'disabled' : '' %>">
                      <a class="page-link" href="?page=<%= currentPage - 1 %>"><i class="bi bi-chevron-left"></i></a>
                    </li>
                    <% for (let i=1; i <=totalPages; i++) { %>
                      <li class="page-item <%= currentPage === i ? 'active' : '' %>">
                        <a class="page-link" href="?page=<%= i %>">
                          <%= i %>
                        </a>
                      </li>
                      <% } %>
                        <li class="page-item <%= currentPage === totalPages ? 'disabled' : '' %>">
                          <a class="page-link" href="?page=<%= currentPage + 1 %>"><i
                              class="bi bi-chevron-right"></i></a>
                        </li>
                </ul>
              </div>
      </div>
    </section>
  </main>
  <%- include("websitepartials/footer") %>

    <style>
      .event-date {
        line-height: 1;
      }

      @media (max-width: 767px) {
        .event-date {
          font-size: 0.85rem;
        }

        .card-title {
          font-size: 1rem;
        }
      }
    </style>