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

<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.course_badge }}" />
                  </div>             
                </div>
              {% endif %}
            {% endfor %}
          </div>
          <a href="#" class="np-view-all-achievements">View All</a>
        {% 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() {
        $('.achivements-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 {
    color: rgba(255, 255, 255, 0.5);
    opacity: 0.5;
    font-size: 1.5rem;
    position: absolute;
    height: 100%;
    top: 50%;
    cursor:pointer;
  }

  .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>