{% assign count_complete = 0 %}
{% assign count_in_progress = 0 %}
{% assign percent_in_progress = 0 %}
{% assign percent_completed = 0 %}
{% assign total_enrolled_courses = 0 %}


{% if courses.enrolled.any? %}
  {% assign total_enrolled_courses = courses.enrolled | size | times: 1 %}

  {% for course in courses.enrolled %}
    {% if course.completed? %}
      {% assign count_complete = count_complete | plus: 1 %}
    {% elsif course.started? %}
      {% assign count_in_progress = count_in_progress | plus: 1 %}
    {% endif %}
  {% endfor %}

  {% assign percent_in_progress = count_in_progress | times: 100 | divided_by: total_enrolled_courses %}
  {% assign percent_completed = count_complete | times: 100 | divided_by: total_enrolled_courses %}
{% endif %}

<div class="widgets-section">
  <div class="row np-flex-center">
    <div class="col-xs-12 col-sm-6 col-md-4">
      <div class="info-widget">
        <div class="widget-label">Courses in progress</div>
        <div class="widget-progress-bar">
          <div class="progress" style="width:{{percent_in_progress}}%"></div>
        </div>
        <div class="widget-number">
          <span>{{ count_in_progress }}</span>/{{ total_enrolled_courses }}</div>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4">
      <div class="info-widget">
        <div class="widget-label">Courses completed</div>
        <div class="widget-progress-bar">
          <div class="progress" style="width:{{percent_completed}}%"></div>
        </div>
        <div class="widget-number">
          <span>{{ count_complete }}</span>/{{ total_enrolled_courses }}</div>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4">
      <div class="info-widget">
        <div class="widget-label">Your Badges</div>
        <div class="badges badges-carousel">
          {% for course in courses.enrolled %}
            {% if course.properties.course_badge contains "http" %}
            <div class="badge {% if course.completed? %}badge-completed{% endif %}">
                <img src="https://s3.amazonaws.com/static.northpass.com/datasnipper/badge-explorer.png" />
              </div>
            {% endif %}
          {% endfor %}
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  .widgets-section {
    margin-top: 64px;
  }

  .info-widget {
    border-radius: 12px;
    border: 1px solid #EAECF0;
    background: #fff;
    box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.06), 0 1px 3px 0 rgba(16, 24, 40, 0.10);
    padding: 24px;
    margin-bottom: 16px;
    height: calc(100% - 16px);
  }

  .widget-label {
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
  }

  .widget-progress-bar {
    margin: 24px 0;
    border-radius: 8px;
    background: #E6E8EB;
    height: 12px;
  }

  .widget-progress-bar .progress {
    background-color: #0D21A1;
    border-radius: 8px;
    height: 12px;
    min-width: 12px;
  }

  .info-widget .widget-number {
    font-size: 20px;
    font-weight: 600;
    line-height: 38px;
    color: #5964B7;
  }

  .info-widget .widget-number > span {
    font-size: 40px;
    color: #0D21A1;
  }

  .info-widget .badges {
    display: flex;
    margin-top: 16px;
  }

  .info-widget .badge,
  .info-widget .badge img {
    max-width: 100px;
  }

  .info-widget .badge:not(.badge-completed) img {
    filter:grayscale(1);
    opacity: 0.4;
  }

  @media(min-width:768px) {}
</style>

<script>
  document.addEventListener("DOMContentLoaded", (event) => {
    const badgesCarouselOptions = {
      container: '.badges-carousel',
      items: 3,
      mouseDrag: true,
      nav:true,
      navPosition: 'bottom',
      controls:false,
      slideBy: 3,
      loop:false,
      responsive: {
        1200: {
          items: 4,
          slideBy: 4,
        }
      },
    }

    createCarousel(badgesCarouselOptions)

  });
</script>