{% comment %} 
  For this widget to work you must import Slick CSS and JS  
{% endcomment %}

{% assign courseCompletedCouter = 0 %}
{% for course in courses.enrolled %}
  {% if course.progress == 100 %}
    {% assign courseCompletedCouter = courseCompletedCouter | plus: 1 %}
  {% endif %}
{% endfor %}
<div class="achievements-box" style="{% if courseCompletedCouter > 0%}display: block !important;{% endif %}">
  <div class="np-dashboard-resources-title">Recent achievements</div>
  <div class="np-dashboard-resources">
    <div class="np-card">
      <div class="np-card-container np-dashboard-border">
        {% if courses.enrolled.any? %}
          <div class="np-card-content-achievements">
            <div class="achievements-carousel">
              {% for course in courses.enrolled %}
                {% if course.progress == 100 %}
                  <div>
                    <div class="np-card-content-title col-12">
                      {{ course.name }}
                    </div>
                    <div class="col-12 ">
                        <img class="np-achievement-icon" src="{{ course.properties.badge }}" />
                    </div>             
                  </div>
                {% endif %}
              {% endfor %}
            </div>
          </div>
        {% else %}
          {% capture message %}
            {% t shared.zero_state.courses.index,
              key: current_school.course_vocabulary
            %}
          {% endcapture %}
          {% include "courses_zero_state", message: message %}
        {% endif %}
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function() {
        $('.achievements-carousel').slick({
            slidesToShow: 1,
            slidesToScroll: 1,
            dots: false,
            infinite: true,
            autoplay: false,
            autoplaySpeed: 5000,
            cssEase: 'linear',
            prevArrow: '<i class="fal fa-chevron-left"></i>',
            nextArrow: '<i class="fal fa-chevron-right"></i>',
            responsive: [{
                breakpoint: 991,
                settings: {

                    dots: false
                }
            }]
        })
    });
</script>

<style>
  .achievements-carousel{
    text-align: center;
  }

  .np-card-content-achievements .np-card-content-title {
    font-size: 0.937rem;
    text-align:center;
    font-weight:500;
  }

  .np-achievement-icon {
    color: #bec2c6;
    margin:14px auto 26px;
    width:130px;
  }

  .np-card-content-achievements .slick-slider {
    width:100%;
    max-width: 375px;
    margin: auto;
  }

  .np-view-all-achievements {
    color:#2BB24C;
    font-size:0.75rem;
    text-transform:uppercase;
    text-align:center;
    text-decoration:none;
    margin-bottom:1.5rem;
  }

  .np-card-content-achievements {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 2rem 2rem .5rem;
  }

  .slick-arrow {
    opacity: 0.5;
    font-size: 1.5rem;
    position: absolute;
    height: 100%;
    top: 50%;
    cursor:pointer;
    z-index: 10;
  }

  .slick-arrow.fa-chevron-left { left:0 }
  .slick-arrow.fa-chevron-right { right:0; }

  @media (min-width:1024px) {
    .np-card-content-achievements .slick-slider {
      max-width: none;
      margin: 0;
    }
  }

</style>