{% include "fixed_header" %}
{% include "course_version_outdated_alert", courses: courses.enrolled %}
<main class="np-main np-dashboard np-subpage-container np-max-width">
  <div class="row np-flex-center">
    <div class="col-xs-12 col-sm-8">
      {% if features.learning_paths? %}
        <div class="np-dashboard-resources-title">
          {% t shared.learning_paths %}
        </div>
        {% include "learning_paths_index", items: learning_paths.enrolled %}
      {% endif %}
      <div class="np-dashboard-resources-title">
        {% t shared.course_vocabulary.plural, key: current_school.course_vocabulary %}
      </div>


      {%- comment -%} {% include "courses_index", class: "col-xs-12 col-sm-6 np-stretch-content" %} {%- endcomment -%}


      {% if courses.enrolled.any? %}    
        {% if current_school.filterable_categories.any? %}
          {% assign categories_by_name = current_school.filterable_categories | sort: "name" %}


          {% for category in categories_by_name %}
            {% assign renderFlag = false %}

            {% for course in courses.enrolled %}
              {% for course_category in course.categories %}
                {% if course_category.name == category.name %}
                  {% assign renderFlag = true %}
                {% endif %}
              {% endfor %}
            {% endfor %}

            {% if renderFlag == true %}
              <div class="np-dashboard-courses" data-name="{{ category.name }}" data-uuid="{{ category.id }}">
                <div class="dashboard-category-header-wrapper">
                  <h2 class="dashboard-category-header">{{category.name}} Courses</h2>
                </div>
                
                <div class="row row-with-thumbnails">
                  {% for course in courses.enrolled %}           
                    {% for course_category in course.categories %}
                      {% if course_category.name == category.name %}
                          <div class="shifting-cards">
                            {% include "cards_course" with course %}
                          </div>
                      {% endif %}
                    {% endfor %}
                  {% endfor %}
                </div>
              </div>         
            {% endif %}
          {% endfor %}
          
        {% endif %}
      {% else %}
        {% capture message %}
          {% t shared.zero_state.courses.index,
            key: current_school.course_vocabulary
          %}
        {% endcapture %}
        {% include "courses_zero_state", message: message %}
      {% endif %}

    </div>
    <div class="np-grid-spacing col-xs-12 col-sm-4">
      <div class="np-dashboard-resources-title">
        Course Progress
      </div>
      {% include "widget_course_progress" %}
      
      {% if features.training_events? %}
          <div class="np-dashboard-resources-title">
            {% t .upcoming_events %}
          </div>
            {% include "training_events_dashboard" %}
      {% endif %}
    </div>
  </div>
</main>
{% include "footer" %}

<style>
  .shifting-cards{
    box-sizing: border-box;
    display: flex;
    flex: 0 0 auto;
    flex-basis: 100%;
    max-width: 100%;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }

  @media screen and (min-width: 650px){
    .shifting-cards{
      flex-basis: 50%;
      max-width: 50%;
    }
  }

  @media screen and (min-width: 768px){
    .row .np-card{
      padding: 0 0 64px;
    }
  }

  @media screen and (min-width: 1024px){
    .np-card-content-title{
      font-size: 1.25rem;
    }
  }
</style>