{% include "header" %}
{% include "course_version_outdated_alert", courses: courses.enrolled %}
{% include "sub_navigation" %}
<main class="np-main np-dashboard np-subpage-container np-max-width">

  {% if courses.enrolled.any? %}
    {% include "activity_overview" %}
  {% endif %}

  <div class="row np-flex-center">
    <div class="col-xs-12">
      {% if features.learning_paths? %}
        <div class="dashboard-LP-header">
          <div class="np-dashboard-resources-title">
            {% t shared.learning_paths %}
          </div>

          {% include "filter_lp_by_progress" %}
        </div>
        {% include "learning_paths_dashboard_index", items: learning_paths.enrolled %}
      {% endif %}


      <div class="dashboard-course-header">
        <div class="np-dashboard-resources-title">
          {% t shared.course_vocabulary.plural, key: current_school.course_vocabulary %}
        </div>

        {% include "filter_courses_by_progress" %}
      </div>
      
      {% include "courses_index", class: "col-xs-12 col-sm-6 np-stretch-content" %}
    </div>
    {%- comment -%} {% if features.training_events? %}
      <div class="np-grid-spacing col-xs-12 col-sm-4">
        <div class="np-dashboard-resources-title">
          {% t .upcoming_events %}
        </div>
          {% include "training_events_dashboard" %}
      </div>
    {% endif %} {%- endcomment -%}
  </div>
</main>
{% include "footer" %}

<style>
  .dashboard-LP-header,
  .dashboard-course-header {
      align-items: center;
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
  }
  
  .np-progress-filter-label {
      color: rgba(255, 255, 255, 0.5);
      padding-right: 7px;
      text-transform: none;
      font-weight:500;
      font-size:0.812rem;
  }
  .filter-select-wrapper {
      position: relative;
      padding:0;
      border: 2px solid  rgba(255, 255, 255, 0.25);
      color: #fff;
      height:auto;
      text-transform: none;
      border-radius:0;
  }
  .filter-select-wrapper:hover {
      color:#fff;
  }
  .select-items {
      position: absolute;
      background-color: #062531;
      top: 105%;
      left: -2px;
      z-index: 99;
      width: 102%;
      border: 2px solid rgba(255, 255, 255, 0.25);
      border-top:none;
  }
  .select-items div {
      color: rgba(255, 255, 255, 0.5);
      border-top:none;
      cursor: pointer;
      width:100%;
      padding: 12px 16px;
    }
  .bqUfwS{
  display:none !important;
  }
  .select-items div:hover {  color: rgba(255, 255, 255, 1); }
  .select-selected {
      width: 100%;
      height: 100%;
      padding: 9px 66px 9px 20px;
      position: relative;
      color:#fff;
  }
  .select-selected::after {
      content:"\f078";
      font-family: "Font Awesome 5 Pro";
      position: absolute;
      width:20px;
      height:100%;
      color:rgba(255, 255, 255, 0.5);
      right:10px;
      top:0;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size:1rem;
  }
  .select-selected::before {
      content:"";
      position: absolute;
      width:20px;
      height:100%;
      border-left:2px solid rgba(255, 255, 255, 0.25);
      right:20px;
      top:0;
  }
  .select-selected.select-arrow-active::after { transform: rotate(180deg); }
  .same-as-selected,
  .filter-select-wrapper select,
  .select-hide {
      display: none;
  }
  .mo-filter-wrapper {
      display: flex;
      justify-content: center;
      list-style: none;
      margin: 0;
      padding: 0;
  }
  .select-items div:hover, 
  .same-as-selected {
    background-color: #062531;
  }
</style>