<div class="section-my-courses">
  <div class="np-max-width">
    <div class="row" style="margin-bottom:32px;">
      <div class="col-xs-12 col-md-8">
        <div class="my-courses-title">
          My Courses
        </div>
      </div>
      <div class="col-xs-12 col-md-4 np-hidden-mobile">
        <div class="my-courses-view-all">
          <a href="/app/dashboard" class="np-button np-button-white">View all courses</a>
        </div>
      </div>
    </div>

    <div class="row">
      {% if courses.enrolled.any? %}
        {% assign enrolled_courses = courses.enrolled | sort: "progress" %}
        {% for course in enrolled_courses limit: 4 %}
          <div class="col-xs-12 col-sm-4 col-md-3">
            {% include "cards_course" with course %}
          </div>
        {% endfor %}
      {% else %}
        <div class="col-xs-12">
          {% capture message %}
            {% t shared.zero_state.courses.index
             , key: current_school.course_vocabulary %}
          {% endcapture %}
          {% include "courses_zero_state", message: message %}
        </div>

      {% endif %}
    </div>
    <div class="row" style="margin-top:32px;">
      <div class="col-xs-12 col-md-4 np-hidden-desktop">
        <div class="upcoming-events-view-all">
          <a href="/app/dashboard" class="np-button np-button-white">View all courses</a>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  .section-my-courses {
    padding: 0 16px 64px;
  }

  .my-courses-title {
    color: #fff;
    font-size: 32px;
    font-weight: 600;
    line-height: 38px;
    letter-spacing: -0.4px;
  }

  .my-courses-view-all {
    text-align: center;
  }

  @media(min-width:768px) {
    .my-courses-title {
      font-size: 40px;
      line-height: 46px;
    }

    .my-courses-view-all {
      text-align: right;
    }

    .section-my-courses .np-card.course-card {
      padding: 0 4px;
    }
  }
</style>
