{% assign completed_courses = 0 %}
{% for course in courses.enrolled %}
    {% if course.progress == 100 and course.properties.badge_course == true %}
        {% assign completed_courses = completed_courses | plus: 1 %}
    {% endif %}
{% endfor %}

<div class="carousel-wrapper">
    <div class="my-badges-carousel">   
        {% include 'badges_cards' %}
    </div>
    {% if completed_courses == 0 %}
        <div class="zero-state-wrapper">
            <img class="zero-img" src="https://s3.amazonaws.com/static.northpass.com/Cin7/zero+state/No+badges+(no+button).png" alt="">
            <div class="zero-button-wrapper">
                <a class="lp-button" href="/app/catalog">Complete your first course now!</a>
            </div>
        </div>
    {% endif %}
</div>

<script>
    $('.my-badges-carousel').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;
    }
    .my-badges-carousel {
        margin: 0 1rem;
    }

</style>
<style>
    .badge-card-image {
        width: 60%;
    }
    .card-badge {
        background: #f8f5f2;
        display: flex;
        justify-content: center;
        padding: 2rem; 
        border-radius: 20px 20px 0 0;
    }
    .card-content-badge {
        text-align: center;
    }
    .completed-courses {
        margin-top: 10px;
        font-weight: 500;
        color: #002f6f;
    }
</style>