
{% assign counter = 0 %}
{% assign learning_paths_core = '50e59300-af4f-40c5-8731-ee88284d8f0d, 3793a1a2-3efa-4cea-afa9-077585520476, a67a07df-f153-4dce-ae93-90f3d76e77df, cdb26bc8-cd06-48dc-b5c4-57349c27b03d, d7d7ff88-3419-4999-b209-13faea260939' | split: ', ' %}
<div class="carousel-wrapper">
    <div class="learning-path-carousel-core">
        {% for learning_path in learning_paths.available %}
            {% if learning_paths_core contains learning_path.id%}
                <div class="card-wrapper">
                    {% include "cards_learning_path_homepage" with learning_path %}
                </div>
                {% assign counter = counter | plus: 1 %}
            {% endif %}
          {% endfor %}
    </div>
    {% if counter == 0 %}
        <div class="zero-state-wrapper">
            <img class="zero-img" src="https://s3.amazonaws.com/static.northpass.com/Cin7/zero+state/no+courses+or+lps+(no+button).png" alt="">
            <div class="zero-button-wrapper">
                <a class="lp-button" href="/app/catalog">Continue learning now!</a>
            </div>
        </div>
    {% endif %}
</div>

<script>
    $('.learning-path-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>"
    });
</script>

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