<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Profils des Alumnis</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="{{ dir }}/public/css/profil.css">
</head>
<body>
<header>
    {% include "menu.html" %}
</header>
<h1 class="text-center my-4">Les Alumnis :</h1>
<div class="container">
    <div class="row justify-content-center">
        <div class="col-12 col-md-8">
            <div class="profiles-container">
                {% for profil in profils %}
                <div class="profile d-flex">
                    <div class="profile-image-container">
                        <img src=" {{dir}}/public/uploads/{{ profil.getImage()  ?: 'logo.png'}}" alt="Image de profil">
                    </div>
                    <div class="profile-details">
                        <p>{{ profil.prenom }} {{ profil.nom }}</p>
                        {% if profil.experience is defined %}
                        <p class="job-title">{{ profil.experience }}</p>
                        {% else %}
                        <p class="job-title">Cet utilisateur n'a pas renseigné son poste</p>
                        {% endif %}
                        <a href="#" class="btn btn-primary">Voir le détail du profil</a>
                        {% if role == 'Admin' %}
                        <button onclick="fetch('{{ dir }}/admin/{{ profil.id }}/supprimerCompte');window.location.reload()" class="btn btn-danger">Bannir l'utilisateur</button>
                        {% endif %}
                    </div>
                </div>
                {% else %}
                <p>Aucun profil trouvé.</p>
                {% endfor %}
            </div>
        </div>
    </div>
</div>

<nav aria-label="Page navigation example">
    <ul class="pagination justify-content-center">
        <li class="page-item {% if page <= 1 %}disabled{% endif %}">
            <a class="page-link" href="{{ dir }}/getProfilByPage/{{ page - 1 }}" tabindex="-1">Précédente</a>
        </li>

        {% for i in 1..nombreTotalPages %}
        <li class="page-item {% if page == i %}active{% endif %}">
            <a class="page-link" href="{{ dir }}/getProfilByPage/{{ i }}">{{ i }}</a>
        </li>
        {% endfor %}

        {% if page < nombreTotalPages %}
        <li class="page-item">
            <a class="page-link" href="{{ dir }}/getProfilByPage/{{ page + 1 }}">Suivante</a>
        </li>
        {% else %}
        <li class="page-item disabled">
            <a class="page-link" href="#">Suivante</a>
        </li>
        {% endif %}
    </ul>
</nav>

<script></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>