<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Event Logs</title>
    <%- include('partials/_favicon') %>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="/styles/main.css">
</head>

<body class="d-flex flex-column min-vh-100">

    <main class="flex-shrink-0">
        <%- include('partials/_navbar') %>

        <div class="container mt-5">
            <div class="header-content">
                <h1>Event Logs</h1>
            </div>
            <div class="list-group">
                <% eventLogs.forEach(log=> { %>
                <a href="/profile/<%= log.User.id %>" class="list-group-item list-group-item-action"
                    aria-current="true">
                    <div class="d-flex w-100 justify-content-between">
                        <h5 class="mb-1">
                            <%= log.User.name %>
                        </h5>
                        <small>
                            <%= new Date(log.createdAt).toLocaleString('nl-NL', { timeZone: 'Europe/Amsterdam' }); %>
                        </small>
                    </div>
                    <p class="mb-1">
                        <%= log.description %>
                    </p>
                </a>
                <% }) %>
            </div>
            <!-- Pagination Controls -->
            <nav aria-label="Page navigation example" class="mt-4">
                <ul class="pagination">
                    <% if(currentPage > 1) { %>
                    <li class="page-item">
                        <a class="page-link" href="/eventLogs?page=<%= currentPage - 1 %>" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <% } %>
                    <% let startPage = Math.max(currentPage - 2, 1); %>
                    <% let endPage = Math.min(startPage + 4, totalPages); %>
                    <% startPage = Math.max(Math.min(startPage, totalPages - 4), 1); %>

                    <% for(let i = startPage; i <= endPage; i++) { %>
                    <li class="page-item <%= i === currentPage ? 'active' : '' %>">
                        <a class="page-link" href="/eventLogs?page=<%= i %>">
                            <%= i %>
                        </a>
                    </li>
                    <% } %>
                    <% if(currentPage < totalPages) { %>
                    <li class="page-item">
                        <a class="page-link" href="/eventLogs?page=<%= currentPage + 1 %>" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                    <% } %>
                </ul>
            </nav>

        </div>
    </main>

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

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>