<script>
  window.location.replace("/app")
</script>

{% comment %} {% assign enrolled_courses = courses.enrolled %}
  {% include "header" %}
  <div class="np-homepage-hero">
    <img
      class="np-homepage-hero-image"
      src="https://s3.amazonaws.com/static.northpass.com/Williams-Sonoma/wsi-hero-min.gif"
      alt="{{ homepage.headline }}" />
    <div class="np-homepage-hero-content"></div>
    <div class="np-homepage-hero-content">
      <div class="np-homepage-headline np-header-font-color">{{ homepage.headline }}</div>
      <div class="np-homepage-subheadline np-header-font-color">
        {{ homepage.subheadline }}
      </div>

    </div>
  </div>
  {% include "sub_navigation" %}
  <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"></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" %}
      </div>
    </div>
    <div class="row np-flex-center">
      <div class="col-xs-12">
        <div class="np-dashboard-header">
          <div class="np-resource-title">MY TRAINING DASHBOARD</div>
        </div>
      </div>

    </div>
    {% include "widget_badges" %}

    {% include "dashboard_filters" %}
    <div class="row np-flex-center">
      <div class="col-xs-12 col-sm-12">
        {% 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>
        {% include "courses_index"
          , class: "col-xs-12 col-sm-6 col-md-4 np-stretch-content" %}
      </div>
    </div>
  </main>

  {% include "footer" %}


  <style>
    .np-resource-title {
      padding-bottom: 16px;
      margin: 32px 0;
      border-bottom: 1px solid #ccc;
      text-align: center;
    }

    .np-dashboard-resources-title {
      font-size: 20px;
      font-weight: 700;
      margin-bottom: 32px;
      color: #000;
    }
  </style>

  <script>
    $(".dashboard-filter-button").click(function() {
      $(".dashboard-filter-button").removeClass("active")
      $(this).addClass("active")
      const selectedFilter = $(this).attr("data-category")

      if (selectedFilter == 'all') {
     $(".filterable-course").show()
      } else {
        $(".filterable-course").hide()
      $(".filterable-course").each(function(index, course) {
        const courseFilter = $(course).attr("data-filter")
        console.log(courseFilter)

        if (courseFilter.includes(selectedFilter)) {
          $(".filterable-course").show()
        }
      })
      }
      
    })
</script> {% endcomment %}