{% comment %} <div class="np-dashboard-resources">
  {% if training_events.enrolled.any? %}
    {% for training_event in training_events.enrolled %}
      <div class="card-wrapper">
        {% include "cards_training_event" with training_event %}
      </div>
    {% endfor %}
  {% endif %}
</div> {% endcomment %}

{% assign counter = 0 %}
<div class="carousel-wrapper">
    <div class="my-events-carousel">
      {% if training_events.enrolled.any? %}
        {% for training_event in training_events.enrolled %}
          <div class="card-wrapper">
            {% include "cards_training_event" with training_event %}
          </div>
          {% assign counter = counter | plus: 1 %}
        {% endfor %}
      {% endif %}
    </div>
    {% if counter == 0 %}
      <div class="zero-state-wrapper">
          <img class="zero-img" src="https://s3.amazonaws.com/static.northpass.com/Cin7/zero+state/no+live+events.png" alt="">
      </div>
  {% endif %}
</div>

<script>
    $('.my-events-carousel').slick({
    infinite: true,
    slidesToShow: 5,
    slidesToScroll: 5,
    prevArrow: "<i class='control-carousel fas fa-chevron-left left-arrow'></i>",
    nextArrow: "<i class='control-carousel fas fa-chevron-right right-arrow'></i>",
    responsive: [
    {
      breakpoint: 1200,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 768,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
  ]
    });
</script>

<style>
    .slick-track {
        display: flex;
    }
    .card {
        height: 100%;;
    }
    .card-wrapper {
        padding: 1rem 0;
        height: auto;
    }
    .my-events-carousel {
        margin: 0 1rem;
    }
</style>