<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="css/accueil.css">
    <title>Alica - Accueil</title>
  </head>


  <!-- balise center provisoire c'est pour mes yeux -->
  <body>
  <header>
    {% include 'menu.html' %}
  </header>
  <h1>Accueil</h1>
  <!-- Bienvenu suivie du mail des informations sessions de l'utilisateur -->
  <p>{% if prenom and nom %}
  Bienvenue, {{ prenom }} {{ nom }} {{id}}!
  {% else %}
  Bienvenue, invité!
  {% endif %}</p>
  <p>Vous êtes sur la page d'accueil</p>
  {% if dVueErreur is not empty %}
  <div class="CadreInput">
    <div class="box">
      <div class="error">
        <ul>
          {% for erreur in dVueErreur %}
          <li>{{ erreur }}</li>
          {% endfor %}
        </ul>
      </div>
    </div>
  </div>
  {% endif %}
  <div class="main">
    <div class="banner">
      <img class="banner-img" src="assets/bandeau.png">
      <div class="title-banner">
        <div class="subtitle">Le réseau Alica te souhaite la bienvenue !</div>
        <div class="title">Alica Info</div>
        <div class="description">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.</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>
          <a href="index.php?action=" class="button">S'inscrire</a>
        </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>
</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>
