{% include "side_navigation_bar" %}


<div class="section-margin">
  <div class="uk-padding-horizontal uk-container uk-container-center">
    <div class="uk-padding-large-vertical uk-padding-horizontal uk-border-bottom">
      <h2>{% t .title %}</h2>
    </div>

    {% if training_events.empty? %}
      <div class="sk-margin-xlarge-top">
        <h1 class="uk-text-center">{% t .no_events %}</h1>
        <h1 class="uk-text-center uk-margin-top-remove">{% t .check_later %}</h1>
      </div>
    {% else %}
      <div class="uk-grid uk-grid-flex uk-margin-left-remove uk-margin-large-top">
        <div class="uk-width-1-1 uk-padding">
          <ul class="uk-grid uk-grid-medium school-website-course-list uk-grid-match">
            {% for training_event in training_events %}
              {% include "training_event" training_event = training_event %}
            {% endfor %}
          </ul>
        </div>
      </div>
    {% endif %}
  </div>
</div>

<style>
  .events-carousel .slick-track {
    margin-left:0;
  }
</style>

<script>
  $(document).ready(function () {
    $(".section-margin").css('opacity','1')
  });

  function initializeCarousel() {
    $('.events-carousel').slick({
      slidesToShow: 3,
      slidesToScroll: 1,
      dots: true,
      infinite: true,
      cssEase: 'linear',
      responsive: [
        {
          breakpoint: 1024,
          settings: {
            slidesToShow: 2,
            slidesToScroll: 1,
            infinite: true,
            dots: true
          }
        },
        {
          breakpoint: 600,
          settings: {
            slidesToShow: 1,
            slidesToScroll: 1
          }
        }
      ]
    })
  }

</script>