<html>

<%- include('partials/_header') -%>          
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles.css">
    <meta name="viewport" content="width=device-width"/>
<head>

  <div class="video-background">
    <div id="video">
        <video autoplay muted loop preload playsinline>
            <!-- <source src="/videos/videoName.mp4" type="video/mp4"> -->
            <source src="/videos/mr_saia.mp4" type="video/mp4">
        </video>
    </div>
    
        <div class="slideshow-container">

          <div class="mySlides fade">
            <img src="/imgs/ytechstudents4.jpeg" style="width:100%">
          </div>

          <div class="mySlides fade">
            <img src="/imgs/ytechstudents.jpeg" style="width:100%">
          </div>

          <div class="mySlides fade">
            <img src="/imgs/ytechstudents3.jpeg" style="width:100%">
          </div>

        </div>


        <!-- Next and previous buttons -->
        <a class="prev" onclick="minusSlides()">❮</a>
        <a class="next" onclick="plusSlides()">❯</a>

    </div>
    <br>

    <div style="text-align:center">
      <span class="dot" onclick="currentSlide(1)"></span>
      <span class="dot" onclick="currentSlide(2)"></span>
      <span class="dot" onclick="currentSlide(3)"></span>
    </div>

    <script>
      let slideIndex = 1;
      let timer;

      showSlides(slideIndex);

      function plusSlides() {
        showSlides(slideIndex += 1);
        if (slideIndex == 4) slideIndex = 1;
      }

      function minusSlides() {
        showSlides(slideIndex -= 1);
        if (slideIndex == 0) slideIndex = 3;
      }

      function currentSlide(n) {
        showSlides(slideIndex = n);
      }

      function showSlides(n) {
        let i;
        const slides = document.getElementsByClassName("mySlides");
        const dots = document.getElementsByClassName("dot");
        if (n > slides.length) {
          slideIndex = 1;
        }
        if (n < 1) {
          slideIndex = slides.length;
        }
        for (i = 0; i < slides.length; i++) {
          slides[i].style.display = "none";
        }
        for (i = 0; i < dots.length; i++) {
          dots[i].className = dots[i].className.replace(" active", "");
        }
        slides[slideIndex - 1].style.display = "block";
        dots[slideIndex - 1].className += " active";
        clearTimeout(timer);
        timer = setTimeout(() => {
          plusSlides();
        }, 10000);
      }


    </script>

</html>