{% include "header" %}
{% include "course_version_outdated_alert", courses: courses.enrolled %}
{% include "sub_navigation" %}
<main class="np-main np-courses np-subpage-container np-max-width">
  
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-7 col-lg-9">
      <div class="np-resource-title">
        My Courses
      </div>
      {% include "courses_index", class: "col-xs-12 col-md-6 col-lg-4 np-stretch-content" %}

      <div class="np-resource-title">
        Available Courses
      </div>
      {% if courses.in_catalog.any? %}
        <div class="np-catalog-courses row row-with-thumbnails">
          {% for course in courses.in_catalog %}
            {% unless course.enrolled? %}
              <div class="col-xs-12 col-md-6 col-lg-4 np-stretch-content">
                {% include "cards_course" with course %}
              </div>
            {% endunless %}
          {% endfor %}
        </div>
      {% else %}
        {% capture message %}
          {% t shared.zero_state.courses.catalog
          , key: current_school.course_vocabulary %}
        {% endcapture %}
        {% include "courses_zero_state", message: message %}
      {% endif %}
    </div>

    {% if features.training_events? %}
      <div class="col-xs-12 col-sm-6 col-md-5 col-lg-3">
        <div class="dashboard-events">
          <div class="np-dashboard-resources-title">
            {% t .upcoming_events %}
          </div>
          {% include "training_events_dashboard" %}
        </div>
      </div>
    {% endif %}
  </div>
</main>
{% include "section_datasnipper_expert" %}
{% include "footer" %}

<style>
  .np-resource-title {
    margin-bottom: 32px;
  }

  .np-dashboard-resources-title {
    color: #fff;
    text-transform: capitalize;
    margin-bottom: 40px;
    font-size: 36px;
    line-height: 40px;
    font-weight: 600;
  }

  .np-zero-state-text {
    color:#fff;
  }

  @media(min-width:768px) {
    .row .np-card.course-card {
      padding: 0 10px 48px;
    }

    .row-with-thumbnails {
      margin-left: -16px;
      margin-right: -16px;
    }

    .dashboard-events .np-card.training-event-card {
      padding-left:0;
      padding-right:0;
    }
  }
</style>

{% comment %} <script>
const categoryFilters = document.querySelectorAll(".category-filter")
const courseColumns = document.querySelectorAll(".course-columns")

categoryFilters.forEach((filter) => {
filter.addEventListener("click", function(e) {
setActiveFilter(e.target)
filterCourses(e.target.getAttribute("data-cat"))
})
})

function setActiveFilter(selectedFilter) {
categoryFilters.forEach((filter) => {
filter.classList.remove("active")
})

selectedFilter.classList.add("active")
}

function filterCourses(filter) {
courseColumns.forEach((col) => {
col.style.display = "none"
})

courseColumns.forEach((col) => {
if (col.getAttribute("data-categories").includes(filter)) {
col.style.display = "flex"
}
})
}
</script> {% endcomment %}