{% assign events_to_hide = "Introduction to DataSnipper, Introduction to the Financial Statement Suite, Automation with DataSnipper, Welcome to the Financial Statement Suite, DataSnipper Tips & Tricks, DataSnipper Q&A, Financial Statement Suite Tips & Tricks" | split: ", " %}

<div class="section-upcoming-events">
  <div class="np-max-width">
    <div class="row">
      <div class="col-xs-12 col-md-8">
        <div class="upcoming-events-title">
          Upcoming Events
        </div>
      </div>
      <div class="col-xs-12 col-md-4 np-hidden-mobile">
        <div class="upcoming-events-view-all">
          <a href="/app/training_events" class="np-button np-button-white">View all live events</a>
        </div>
      </div>
    </div>

    <div class="row events-carousel-row">
      <div class="col-xs-12">
        <div class="upcoming-events-carousel">
          {% if training_events.available.any? %}
            {% assign training_events_count = 0 %}
            {% for training_event in training_events.available %}
              {% unless events_to_hide contains training_event.title %}
                <div class="event-item">
                  {% include "cards_training_event" with training_event %}
                </div>
                {% assign training_events_count = training_events_count | plus: 1 %}
              {% endunless %}

              {% if training_events_count > 3 %}
                {% break %}
              {% endif %}
            {% endfor %}
          {% else %}
            {% include "training_events_zero_state" %}
          {% endif %}
        </div>
        <div class="events-carousel-nav">
          <div class="prev-button far fa-arrow-left"></div>
          <div class="next-button far fa-arrow-right"></div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12 col-md-4 np-hidden-desktop">
        <div class="upcoming-events-view-all">
          <a href="/app/training_events" class="np-button np-button-white">View all live events</a>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  document.addEventListener("DOMContentLoaded", (event) => {
    const eventsCarouselOptions = {
      container: '.upcoming-events-carousel',
      controlsContainer: ".events-carousel-nav"
    }

    createCarousel(eventsCarouselOptions)

     updateEventTimezone()
  });
</script>

<style>
  .section-upcoming-events {
    padding: 0 16px 64px;
  }

  .upcoming-events-title {
    color: #fff;
    font-size: 32px;
    font-weight: 600;
    line-height: 38px;
    letter-spacing: -0.4px;
  }

  .upcoming-events-view-all {
    text-align: center;
  }

  .events-carousel-row {
    margin-top: 40px;
  }

  @media(min-width: 768px) {
    .upcoming-events-title {
      font-size: 40px;
      line-height: 46px;
    }

    .upcoming-events-view-all {
      text-align: right;
    }
  }
</style>