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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin Gebruikersoverzicht</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="mb-3">
                <h1>Admin Gebruikersoverzicht</h1>

                <% if (errorMessage) { %>
                <div class="alert alert-<%= alertType %> alert-dismissible fade show" role="alert">
                    <%= errorMessage %>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
                <% } %>

                <table class="table table-striped ">
                    <thead>
                        <tr>
                            <th>Naam</th>
                            <th>Bestuursjaar</th>
                            <th>BAK Aantal</th>
                            <th>Acties</th>
                        </tr>
                    </thead>
                    <tbody>
                        <% leden.forEach(lid => { %>
                        <tr>
                            <td><img src="<%= lid.profilePicture ? 'https://bak-counter-images.ams3.digitaloceanspaces.com/' + lid.profilePicture : '/uploads/profile/blank_image.png' %>"
                                    alt="Profielfoto" class="rounded-circle me-2"
                                    style="width: 30px; height: 30px; object-fit: cover;">
                                <%= lid.name %>
                            </td>
                            <td><%= lid.bestuursjaar %></td>
                            <td><%= lid.bak %></td>
                            <td>
                                <a href="/admin/<%= lid.id %>" class="btn btn-theme btn-sm">Bijwerken</a>
                            </td>
                        </tr>
                        <% }); %>
                    </tbody>
                </table>
            </div>

            <!-- Optioneel, voeg hier meer secties toe voor andere gegevens of acties -->

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