{% if learning_paths.available.any? %}
  {% assign paths_shown = 0 %}
  {% assign paths_to_show = 6 %}
  <div class="nintex-fw-container">
    <div class="np-homepage-featured-text">
      <div class="nintex-headline">
        <span class="lang-en-US">Learning Paths</span>
        <span class="lang-es">Rutas de aprendizaje</span>
        <span class="lang-fr">Chemins d'apprentissage</span>
        <span class="lang-de">Lernpfade</span>
        <span class="lang-en-GB">Learning Paths</span>
        <span class="lang-nl">Leerpaden</span>
        <span class="lang-pt-BR">Caminhos de aprendizagem</span>
      </div>
      {% comment %} <div class="nintex-subheadline">
        <span class="lang-en-US">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
        <span class="lang-es">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
        <span class="lang-fr">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
        <span class="lang-de">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
        <span class="lang-en-GB">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
        <span class="lang-nl">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
        <span class="lang-pt-BR">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
      </div> {% endcomment %}
    </div>
    <div class="embla-container">
      <div class="embla-buttons">
          <button class="embla-button embla-button--prev" onclick="scrollPrev()">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" clip-rule="evenodd"
                d="M9.71402 2L8.2998 3.41421L13.0927 8.20711L8.2998 13L9.71402 14.4142L15.9211 8.20711L9.71402 2Z"
                  fill="#BE0075"></path>
              </svg>
            </button>
          <button class="embla-button embla-button--next" onclick="scrollNext()">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" clip-rule="evenodd"
                d="M9.71402 2L8.2998 3.41421L13.0927 8.20711L8.2998 13L9.71402 14.4142L15.9211 8.20711L9.71402 2Z"
                  fill="#BE0075"></path>
              </svg>
            </button>
        </div>
      <div class="embla" id="embla-homepage-paths">
      <div class="embla__container">
        {% for learning_path in learning_paths.available %}
          <div class="embla__slide">
            {% include "cards_learning_path_nintex" with learning_path %}
          </div>
          {% assign paths_shown = paths_shown | plus: 1 %}
          {% if paths_shown >= paths_to_show %}
            {% break %}
          {% endif %}
        {% endfor %}

      </div>
    </div>
    </div>
    <div class="nintex-btns-container">
    <a href="/app/learning_paths" class="nintex-text-button">
          <span class="lang-en-US">View more</span>
          <span class="lang-es">Ver más</span>
          <span class="lang-fr">Voir plus</span>
          <span class="lang-de">Mehr anzeigen</span>
          <span class="lang-en-GB">View more</span>
          <span class="lang-nl">Meer bekijken</span>
          <span class="lang-pt-BR">Ver mais</span>
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd"
              d="M9.71402 2L8.2998 3.41421L13.0927 8.20711L8.2998 13L9.71402 14.4142L15.9211 8.20711L9.71402 2Z"
                fill="white"></path>
            </svg>
          </a>
        </div>
  </div>
{% endif %}

<script>
  var embla;
  document.addEventListener('DOMContentLoaded', function() {
    var emblaNode = document.querySelector('#embla-homepage-paths');
    const options = { loop: false }
    const plugins = [EmblaCarouselAutoplay({
      delay: 10000,
      stopOnMouseEnter: true,
    })]

    embla = EmblaCarousel(emblaNode, options, plugins);

    
  });

  function scrollPrev() {
      if(embla.canScrollPrev()) {
        embla.scrollPrev();
      }else{
        embla.scrollTo(document.getElementsByClassName('embla__slide').length - 1);
      }
    }

    function scrollNext() {
      if(embla.canScrollNext()) {
        embla.scrollNext();
      }else{
        embla.scrollTo(0);
      }
    }
</script>

<style>
  @media screen and (min-width: 768px) {
    .embla__slide {
      flex: 0 0 calc((100% - 2rem) / 3);
      min-width: 0;
    }
  }
</style>