{% assign omni = false %}
{% assign core = false %}
{% assign partners = false %}
{% assign log_out = true %}
{% assign both_gorups = false %}

{% if current_person.signed_in? %}
  {% assign log_out = false %}
  {% for group in current_person.groups %}
	{% if group.name contains 'Partners' %}
	  {% assign partners = true %}
	{% else %}
	  {% if group.name contains 'Core' %}
		{% assign core = true %}
		{% elsif group.name contains 'Omni' %}
		  {% assign omni = true %}
	  	{% endif %}
	  {% endif %}
  {% endfor %}
{% endif %}

{% if omni and core %}
  {% assign both_gorups = true %}
{% endif %}

<div class="carousel-wrapper">
    <div class="feature-courses-carousel">
        {% for course in courses.in_catalog %}
          {% if both_gorups %}
            {% if course.properties.feature_course_omni == true or course.properties.feature_course_core == true %}
              <div class="card-wrapper">
                  {% include 'cards_course' %}
              </div>
            {% endif %}
          
            {% elsif core %}
                {% if course.properties.feature_course_core == true %}
                    <div class="card-wrapper">
                        {% include 'cards_course' %}
                    </div>
                {% endif %}
			  {% elsif omni %}
                {% if course.properties.feature_course_omni == true %}
                    <div class="card-wrapper">
                        {% include 'cards_course' %}
                    </div>
                {% endif %}
			  {% elsif partners %}
				{% if course.properties.feature_course_omni == true or course.properties.feature_course_core == true %}
                    <div class="card-wrapper">
                        {% include 'cards_course' %}
                    </div>
					{% endif %}
			  {% else %}
				{% if course.properties.feature_course_omni == true or course.properties.feature_course_core == true %}
                    <div class="card-wrapper">
                        {% include 'cards_course' %}
                    </div>
					{% endif %}
            {% endif %}
        {% endfor %}
    </div>
</div>

<script>
    $('.feature-courses-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;
    }
    .feature-courses-carousel {
        margin: 0 1rem;
    }
</style>