{% assign customer_care_badges = "https://s3.amazonaws.com/static.northpass.com/Williams-Sonoma/badge-customer-service.png,https://s3.amazonaws.com/static.northpass.com/Williams-Sonoma/badge-furniture.png,https://s3.amazonaws.com/static.northpass.com/Williams-Sonoma/badge-registry-management.png,https://s3.amazonaws.com/static.northpass.com/Williams-Sonoma/badge-sales.png" %}


<div class="badges-cont" style="max-width: 80%; align-content: space-evenly;">
    <div class="np-dashboard-resources-title">
      My Badges
    </div>
    <div class="badges">
      <div class="badges-controls default-carousel-controls">
        <i class="fa fa-chevron-left prev"></i>
        <i class="fa fa-chevron-right next"></i>
      </div>

      <div class="badges-wrapper">
        {% comment %} If user is in CCC group  {% endcomment %}
        {% assign customer_care_badges_array = customer_care_badges | split: "," %}
        {% for customer_care_badge in customer_care_badges_array %}
          <div class="badge-img">
            <div class="badge-image-container">
              <img src="{{ customer_care_badge }}" />
            </div>
          </div>
        {% endfor %}


        {% for course in enrolled_courses %}
          {% if course.properties.course_badge contains "http" %}
            <div class="badge-img">
              <div class="badge-image-container">
                <img src="{{ course.properties.course_badge }}" />
              </div>
            </div>
          {% endif %}
        {% endfor %}
      </div>
    </div>
</div>

<style>
  .badges-wrapper {
    margin-bottom: 32px;
  }

  .badge-image-container {
    height: 100px;
    width: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .badge-img img {
    max-width: 100%;
    max-height: 100%;
  }
  .badges-wrapper {
    width: 100% !important;
  }
</style>

<script>
      window.addEventListener("DOMContentLoaded", function() {
    const badgesCarouselOptions = {
      container: '.badges-wrapper',
      nav: true,
      navPosition:'bottom',
      arrowKeys: false,
      controls: false,
      mouseDrag: true,
      controlsContainer: ".badges-controls",
      gutter: 16,
      items: 3,
      loop: false,
       responsive: {
          768: {
            arrowKeys: true,
            controls: true,
            nav: false,
            items: 6
          },
          1200: {
            arrowKeys: true,
            controls: true,
            nav: false,
            items: 10
          }
        }
    }

    createCarousel(badgesCarouselOptions)
      });
</script>