{% assign blog_counter = 0 %}
<div class="heading-container">
  <a href='/app/blog' class="carousel-heading events-link">
    Announcements
  </a>
</div>
<div class="carousel-wrapper">
  <div class="announcement-carousel">
      {% for course in courses.in_catalog %}
        {% for category in course.categories %}
            {% if category.name == 'Blog' %}
                <div class="event-cart-carousel-item">
                    {% include "cards_course" with course %}
                  {% assign blog_counter = blog_counter |  plus: 1 %}
                </div>
            {% endif %}
        {% endfor %}
      {% endfor %}
  </div>
  {% if blog_counter == 0 %}
    {% include "training_events_zero_state" %}
  {% endif %}
</div>  
<style>
  .events-grid-container {
    width: 33%;
  }
  .announcements-carousel {
    width: 100%;
    margin: 0;
  }
</style>

<script>
$(document).ready(function() {

    $(".announcement-carousel").slick({
        slidesToShow: 1,
        cssEase: 'linear',
        prevArrow: '<i class="fal fa-chevron-left arrow-left"></i>',
        nextArrow: '<i class="fal fa-chevron-right arrow-right"></i>',
        infinite: false,
        responsive: [
            {
                breakpoint: 1170,
                settings: {
                    slidesToShow: 1,
                }
            },
            {
                breakpoint: 768,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1,
                    dots: false,
                    arrows: true,
                }
            }
        ]
    });
});
</script>