{% if training_events.enrolled.any? or training_events.available.any? %}
  {% if training_events.enrolled.any? %}
    {% assign enrolledEvents = 0 %}
    {% for training_event in training_events.enrolled %}
      {% assign enrolledEvents = enrolledEvents | plus: 1 %}
    {% endfor %}
    <div class="np-dashboard-resources">
      {%- comment -%} {% if enrolledEvents > 3 %}
        <div class="carousel-buttons-container events-enrolled-carousel-buttons-container">
          <div class="np-dashboard-resources-title">Registered</div>
          <div style="display: flex">
            <div class="previous-carousel-button previous-events-enrolled-button" onclick="eventsESlider.goTo('prev')">
              <i class="far fa-solid fa-arrow-left"></i>
            </div>
            <div class="next-carousel-button next-events-enrolled-button" onclick="eventsESlider.goTo('next')">
              <i class="far fa-solid fa-arrow-right"></i>
            </div>
          </div>
        </div>
      {% else %}
      {% endif %} {%- endcomment -%}
      <div class="np-dashboard-resources-title">Registered</div>

      <div class="row row-with-thumbnails events-grid">
        {% for training_event in training_events.enrolled %}
          {% include "cards_training_event" with training_event %}
        {% endfor %}
      </div>
    </div>
  {% endif %}

  {% if training_events.available.any? %}
    {% assign availableEvents = 0%}
    {% for training_event in training_events.available %}
      {% assign availableEvents = availableEvents | plus: 1 %}
    {% endfor %}

    <div class="np-dashboard-resources">
      {%- comment -%} {% if availableEvents > 3 %}
        <div class="carousel-buttons-container events-available-carousel-buttons-container">
          <div class="np-dashboard-resources-title">Upcoming</div>
          <div style="display: flex">
            <div class="previous-carousel-button previous-events-available-button" onclick="eventsASlider.goTo('prev')">
              <i class="far fa-solid fa-arrow-left"></i>
            </div>
            <div class="next-carousel-button next-events-available-button" onclick="eventsASlider.goTo('next')">
              <i class="far fa-solid fa-arrow-right"></i>
            </div>
          </div>
        </div>
      {% else %}
      {% endif %} {%- endcomment -%}
      <div class="np-dashboard-resources-title">Upcoming Events</div>

      <div class="row row-with-thumbnails events-grid">
        {% for training_event in training_events.available %}
          {% include "cards_training_event" with training_event %}
        {% endfor %}
      </div>
    </div>
  {% endif %}
{% else %}
  {% include "training_events_zero_state" %}
{% endif %}

<style>
  .non-carousel{
    max-width: 100%;
  }

  @media screen and (min-width: 768px){
    .events-grid{
      margin-right: 0;
    }
  }
</style>