<div class="top-courses">
  <div class="top-courses-header">
    <div class="top-courses-header-left">
      <div class="top-courses-header-left-title">
        Top courses
      </div>
      <div class="top-courses-header-left-subtitle">
        10,000+ unique online course list designs
      </div>
    </div>
    <a class="top-courses-header-button" href="{% route courses %}">
      All Courses <i class="fal fa-arrow-up" style="transform: rotate(45deg); margin-left: 8px;"></i>
    </a>
  </div>
  <div class="top-courses-carousel-wrapper">
    <div class="top-courses-carousel">
      {% for course in courses.enrolled %}
        {% if course.properties.top_course %}
          {% include 'cards_course_dashboard' %}
        {% endif %}
      {% endfor %}
    </div>
  </div>
</div>

<style>

.top-courses {
  max-width:1320px;
  margin:auto;
}

.top-courses-carousel.tns-slider {
  display:flex;
}

.top-courses-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 50px 0;
}

  .top-courses-header-left-title {
    font-size: 2rem;
    color: rgb(86, 49, 80);
    font-weight: 600;
  }

  .top-courses-header-left-subtitle {
    color: #3d4371;
  }

  .top-courses-header-left {
    margin-bottom: 20px;
  }

  .top-courses-header-button {
    padding: 16px 32px;
    background: #ebeaff;
    color: #724b6b !important;
    font-weight: 500;
    border-radius: 8px;
  }

  .top-courses-carousel-wrapper {
    position: relative;
    margin:0 32px;
  }

  .top-courses .tns-controls {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    z-index: 10;
    display: flex;
    justify-content: space-between;
    width: 100%;
  }
  .top-courses .tns-controls button {
    background: none;
    border: 1px solid #563150;
    border-radius:50px;
    font-size: 20px;
    width: 36px;
    height: 36px;
    display: flex;
    justify-content: center;
    align-content: center;
    position:relative;
    transition: all 0.1s;
  }

   .top-courses .tns-controls button:hover {
    background: #563150;
    border: 1px solid #563150;
    color:#fff;
  }

  .top-courses .tns-controls button[data-controls='next'] {
    left:43px;
  }

  .top-courses .tns-controls button[data-controls='prev'] {
   right:43px;
  }

  .top-courses .tns-controls button:disabled {
    opacity:0;
  }

  .top-courses .tns-controls button i {
    align-self: center;
  }

  @media (min-width:850px) {
     .top-courses .tns-controls button {
      font-size: 22px;
      width: 40px;
      height: 40px;
    }

    .top-courses .tns-controls button[data-controls='next'] {
      left:55px;
    }

    .top-courses .tns-controls button[data-controls='prev'] {
    right:55px;
    }
  }

  @media (min-width:1200px) {
     .top-courses .tns-controls button {
      font-size: 27px;
      width: 50px;
      height: 50px;
    }

    .top-courses .tns-controls button[data-controls='next'] {
      left:70px;
    }

    .top-courses .tns-controls button[data-controls='prev'] {
    right:70px;
    }
  }

</style>

<script>
  window.addEventListener('DOMContentLoaded', function() {
    var filtersSlider = tns({
      container: '.top-courses-carousel',
      controls: true,
      controlsText: ['<i class="fal fa-long-arrow-left"></i>','<i class="fal fa-long-arrow-right"></i>'],
      loop: false,
      mouseDrag: true,
      swipeAngle: false,
      items: 1,
      nav: false,
      gutter: 30,
      responsive: {
      640: {
        items: 2
      },
      850: {
        items: 3
      },
      1200: {
        items: 4
      }
    }
    });
  })
</script>
