<div class="np-dashboard-resources">
  <div class="np-card">
    <div class="np-card-container np-dashboard-border">
      <div class="np-card-content-achievements">
        <div class="achievements-carousel">
          {% for course in courses.enrolled %}
            {% if course.properties.badges != 'NULL' and 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.badges }}" />
                </div>             
              </div>
            {% endif %}
          {% endfor %}
        </div>
        {% include "achievements_modal" %}     
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">
const noBadgeMsg = "<div class='no-badge-msg'>Complete a course to recieve your first badge!</div>";
    $('document').ready(function() {
      if ($(".achievements-carousel").children().length > 0) {
        $('.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
            }
          }]
        })
      } else {
        $(".achievements-carousel").append(noBadgeMsg)
      }
        
    });

    $(".dialog-trigger").click(function() {
      if (!$("body").hasClass("modal-open")) {
        $("body").addClass("modal-open");
      }
    });

    $(".modal-close").click(function() {
      $("body").removeClass("modal-open");
    })    
</script>

<style>

  .noBadgeMsg {
    text-align:center;
    margin-bottom:32px;
  }

  .modal-open {
    height: 100%;
    overflow: hidden;
  }

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

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

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

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

  .slick-arrow {
    color: #35404E;
    font-size: 1.5rem;
    position: absolute;
    top: 50%;
    cursor:pointer;
  }

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

  .np-view-all-achievements {
    color:#092344;
    font-size:0.8rem;
    text-transform:uppercase;
    text-align:center;
    text-decoration:none;
    margin-bottom:1.5rem;
    cursor:pointer;
    font-weight:500;
    transition: all 0.1s;
  }

  .np-view-all-achievements:hover {
    text-decoration:underline;
  }

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

</style>
