<div class="row recent-courses-row">
    <div class="col-xs-12">
      <div class="recent-courses-flex-wrapper">
        <div>
          <div class="dashboard-title">COURSES: RECENTLY ADDED</div> 
          <div class="dashboard-subtitle">See what's new from Brighton Science</div>
        </div>
        <div class="recent-courses-link">
          <a href="/app/courses" class="recent-courses-link">View all Courses</a>
        </div>
      </div>
    </div>
    <div class="col-xs-12">
      <div class="row recent-courses-list">
        {% for course in enrolled_courses %}
          {% unless course.properties.course_publish_date == "MM/DD/YYYY" %}
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 recent-course np-hidden" data-date="{{course.properties.course_publish_date}}">
              {% include "cards_course" with course %}
            </div>
          {% endunless %}
        {% endfor %}
      </div>
    </div>
  </div>

  <script>
    var indexes = document.querySelectorAll(".recent-course:not([data-date=''])");
    var indexesArray = Array.from(indexes);

    const sortByDate = arr => {
      const dateSorter = (a, b) => {
          return new Date(b.dataset.date).getTime() - new Date(a.dataset.date).getTime();
      }
      arr.sort(dateSorter);
    };

    sortByDate(indexesArray);

    $(".recent-courses-list").empty()

    for (let i = 0; i < indexesArray.length; i++) {
      if (i < 4) {
        document.querySelector(".recent-courses-list").appendChild(indexesArray[i])
      }
    }

    $(".recent-course").removeClass("np-hidden")
  </script>

  <style>
  .recent-courses-flex-wrapper {
    margin:32px 0;
  }

  .recent-courses.link {
    margin-bottom: 32px;
    text-align: right;
  }

  .recent-courses-flex-wrapper .dashboard-title {
    margin-bottom:4px;
  }

  @media (min-width:768px) {
    .recent-courses-flex-wrapper {
      display:flex;
      justify-content:space-between;
      align-items:flex-end;
       margin:64px 0 32px ;
    }

    .recent-courses-row .np-card {
      padding: 0 0 32px;
      height:100%;
    }
  }
  </style>