<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="{{dir}}/public/css/accueil.css">
  <title>Alica - Accueil</title>
</head>
<body>
<header>
  {% include 'menu.html' %}
</header>

<div class="container mt-5">
  <h1 class="text-center">Accueil</h1>
  <p class="text-center">
    {% if prenom and nom %}
    Bienvenue, {{ prenom }} {{ nom }} {{id}} {{role}}!
    {% else %}
    Bienvenue, invité!
    {% endif %}
  </p>

  {% if dVueErreur is not empty %}
  <div class="alert alert-danger">
    <ul>
      {% for erreur in dVueErreur %}
      <li>{{ erreur }}</li>
      {% endfor %}
    </ul>
  </div>
  {% endif %}

  <div class="row">
    <div class="col-md-12">
      <div class="banner">
        <img class="img-fluid" src="{{dir}}/public/assets/bandeau.png">
        <div class="banner-content">
          <h2>Le réseau Alica te souhaite la bienvenue !</h2>
          <p>Nous sommes d’anciens étudiants à l’IUT d’Aubière qui aimerions créer un réseau d'anciens étudiants au travers d'un réseau alumni du département Informatique.</p>
        </div>
      </div>
    </div>
  </div>


<!--
  <div class="slideshow-container" id="evenements">
      {% for event in eventsList %}
      <div class="slide">
        <div class="slide-img">
          <img src="{{ event.image }}">
        </div>
        <div class="slide-info">
          <div class="slide-date">{{event.date}}</div>
          <div class="slide-title">{{event.titre}}</div>
          <div class="slide-description">{{event.description}}</div>
        </div>
      </div>
      {% endfor %}
      <button class="prevButton" onclick="plusDivs(-1)">&#10094;</button>
      <button class="nextButton" onclick="plusDivs(1)">&#10095;</button>
    </div>
    <div class="search">
      <input class="search-bar" type="text" placeholder=" Rechercher des alumni...">
      <a class="search-button" href="index.php?action=consulterProfilLimite">
        <ion-icon name="search-outline"></ion-icon>
      </a>
    </div>
  </div>
  </body>
<footer> -->
  {% include 'footer.html' %}
</footer>


<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>
</html>
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
<script>
  let bar = document.querySelector('.bars'), navItem = document.querySelector('.nav-items');

  bar.addEventListener('click', () => {
    navItem.classList.toggle('active');
  });

  var slideIndex = 1;
  showDivs(slideIndex);

  function plusDivs(n) {
    showDivs(slideIndex += n);
  }

  function showDivs(n) {
    var i;
    var x = document.getElementsByClassName("slide");
    if (n > x.length) {slideIndex = 1}
    if (n < 1) {slideIndex = x.length}
    for (i = 0; i < x.length; i++) {
      x[i].style.display = "none";
    }
    x[slideIndex-1].style.display = "flex";
  }
</script>
