{% include "header" %}
{% include "course_version_outdated_alert", courses: courses.enrolled %}
{% include "sub_navigation" %}
{% assign enrolled_courses = courses.enrolled %}
<main class="np-main np-courses np-subpage-container ">
  <div class="np-max-width">
    <div class="np-resource-title">
      Completed Courses
    </div>
  </div>

  {% if courses.enrolled.any? %}
    <div class="courses-container-wrapper">
    <div class="row row-with-thumbnails courses-container">
          {% for course in courses.enrolled %}
            {% if course.progress == 100 %}
            <div class="col-xs-12 col-sm-6 col-lg-4 np-stretch-content">
              {% include "cards_course" with course %}
            </div>
            {% endif %}
          {% endfor %}
      </div>
    </div>
  {% else %}
    {% capture message %}
      {% t shared.zero_state.courses.index,
        key: current_school.course_vocabulary
      %}
    {% endcapture %}
    {% include "courses_zero_state", message: message %}
  {% endif %}

</main>
{% include "footer" %}

<style>
 .courses-container-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 4rem;
}
    .courses-container {
        width: 90%;
    }

  .np-main.np-courses.np-subpage-container {
    padding: 32px 0 50px;
  }

  .np-resource-title {
    font-size: 32px;
    text-align:center;
    font-weight:400;
    line-height:normal;
  }

  .category-filters-row {
    display: flex;
    justify-content: center;
    margin-top:32px;
  }

  .category-filter-button {
    background-color: transparent;
    border: 2px solid #000;
    color: #000;
    text-decoration: none;
    padding: 4px 12px;
    font-weight: 700;
    border-radius: 4px;
    margin: 0 12px 16px;
    font-size:14px;
    transition: all 0.1s;
  }

  .category-filter-button:hover {
    color:#fff;
    background:#000;
  }

  .category-row {
    padding:32px 16px;
  }

  .category-row:nth-child(odd) {
    background-color:whitesmoke;
  }

  .category-row .slick-list {
    margin:0 -16px;
  }

  .category-row .slick-slide {
    margin: 0 16px;
  }

  .see-all-btn-container {
    text-align:right;
  }

  @media (min-width:768px) {

    .np-resource-title {
      font-size: 55px;
    }

    .category-filter-button {
      font-size: 16px;
      padding: 8px 16px;
      margin: 0 16px 16px;
    }

    .category-row {
      padding:64px 24px;
    }

    .np-courses .section-carousel {
      padding-left:5%;
      padding-right:5%;
    }

    .category-row .np-md-flex-wrapper {
      justify-content: space-between;
      align-items: center;
    }

    .category-row .slick-list,
    .category-row .slick-slide {
      margin:0;
    }

  }
</style>