{% assign unique_category = "" %}
{% assign category_images = 'https://s3.amazonaws.com/static.northpass.com/Cin7/categories+images+core+/Accounting+Deep+Dives+-+Thumbnails.png, https://s3.amazonaws.com/static.northpass.com/Cin7/categories+images+core+/Administrative+Deep+Dives+-+Thumbnail.png, https://s3.amazonaws.com/static.northpass.com/Cin7/categories+images+core+/Product+Management+Deep+Dives+-+Thumbnail.png, https://s3.amazonaws.com/static.northpass.com/Cin7/categories+images+core+/Simple+Manufacturing+Deep+Dives+-+Thumbnail.png, https://s3.amazonaws.com/static.northpass.com/Cin7/categories+images+core+/Warehouse+Operations+Deep+Dives+-+Thumbnail.png' | split: ', ' %}
{% assign category_counter = 0 %}
{% assign core_categories = 'Warehouse Operations: Core, Admin: Core, Product Management: Core, Accounting: Core, Simple Manufacturing: Core' | split: ", " %}

<div class="category-carousel-core">
    {% for learning_path in learning_paths.available %}
        {% for category in learning_path.categories %}
            {% if core_categories contains category.name %}
                {% unless unique_category contains category.name %}    
                    {% include 'category_cards_core' counter: category_counter %}
                    {% assign unique_category = unique_category | append: category.name %}
                    {% assign category_counter = category_counter | plus: 1 %}
                    {% if category_counter > 3 %}
                        {% assign category_counter = 0 %}
                    {% endif %}
                {% endunless %}
            {% endif %} 
        {% endfor %}
    {% endfor %}
</div>

<script>
    $('.category-carousel-core').slick({
    infinite: true,
    slidesToShow: 4,
    slidesToScroll: 4,
    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
      }
    },
    {
      breakpoint: 768,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
  ]
    });
</script>

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