<div class="carousel section carousel-hero {{ .classes }}">
  <!-- carousel locator -->
  {{ $currentSlideIndex := 0 }}
  {{ range .items }}
  <input
    class="carousel-locator"
    id="slide-{{ $currentSlideIndex }}"
    type="radio"
    name="carousel-radio"
    hidden=""
    {{ if eq $currentSlideIndex 0 }}
    checked=""
    {{ end }}
  />
  {{ $currentSlideIndex = add $currentSlideIndex 1}}
  {{ end }}

  <!-- carousel container -->
  <div class="carousel-container">
    <!-- carousel item -->
    {{ $currentSlideIndex = 0 }}
    {{ $lastSlideIndex := sub (len .items) 1 }}
    {{ range .items }}
    <figure class="carousel-item modular-hero hero" style="{{ with .image }}background-image: url('{{ . | relURL }}');{{ end }} {{ with .positionY }} background-position-y: {{ . }}%;{{ end }}">
      {{ $previousSlideIndex := sub $currentSlideIndex 1 }}
      {{ if lt $previousSlideIndex 0 }}
      {{ $previousSlideIndex = $lastSlideIndex }}
      {{ end }}

      {{ $nextSlideIndex := add $currentSlideIndex 1}}
      {{ if gt $nextSlideIndex $lastSlideIndex }}
      {{ $nextSlideIndex = 0 }}
      {{ end }}

      <div class="image-overlay"></div>

      <label class="item-prev btn" for="slide-{{ $previousSlideIndex }}">
        <i class="fa fa-chevron-left"></i>
      </label>
      <label class="item-next btn" for="slide-{{ $nextSlideIndex }}">
        <i class="fa fa-chevron-right"></i>
      </label>

      <section class="container {{ site.Params.GridSize }} carousel-content" style="text-align: {{ default "center" .align }}">
        {{ .content | markdownify }}
        {{ with .links }}
        <p>
          {{ range . }}
            <a href="{{ .href }}" class="{{ .classes }}" {{ with .target }}target="{{.}}"{{ end }}>{{ .text }}</a>
          {{ end }}
        </p>
        {{ end }}
      </section>
    </figure>

    {{ $currentSlideIndex = add $currentSlideIndex 1}}
    {{ end }}
  </div>
  <!-- carousel navigation -->
  <div class="carousel-nav" id="carousel-nav">
    {{$currentSlideIndex = 0}}
    {{ range .items }}
    <label class="nav-item text-hide c-hand" for="slide-{{ $currentSlideIndex }}">{{ $currentSlideIndex }}</label>
    {{ $currentSlideIndex = add $currentSlideIndex 1}}
    {{ end }}
  </div>
  <!-- carousel controller -->
  <script>
    // Spin carousel after fife seconds
    const carousel = document.querySelector('#carousel-nav');
    const carouselLocators = document.querySelectorAll('.carousel-locator');
    let carouselIndex = 1;

    // find initial carouselIndex
    for (let i = 0; i < carouselLocators.length; i++) {
      if (carouselLocators[i].checked) {
        carouselIndex = (i+1) % carouselLocators.length;
        break;
      }
    }

    const carouselInterval = setInterval(() => {
      carouselLocators[carouselIndex].click();
      carouselIndex = (carouselIndex+1) % carouselLocators.length;
    }, 5000);

    // stop carousel when clicked manually on any item
    for(const item of carousel.querySelectorAll('.nav-item')) {
      item.addEventListener('click', () => {
        clearInterval(carouselInterval);
      });
    }

    // stop carousel when clicked on any item-next or item-prev
    for(const item of document.querySelectorAll('.item-next, .item-prev')) {
      item.addEventListener('click', () => {
        clearInterval(carouselInterval);
      });
    }

  </script>
</div>
