<!-- {% comment %}{% include "header" %}{% endcomment %}
{% include "course_version_outdated_alert", courses: courses.in_catalog %}
{% comment %}{% include "sub_navigation" %}{% endcomment %}
{% comment %} https://s3.amazonaws.com/static.northpass.com/Crayon/acceleratorBadge.png {% endcomment %}
{% comment %} https://s3.amazonaws.com/static.northpass.com/Crayon/activatorBadge.png {% endcomment %}
{% comment %} https://s3.amazonaws.com/static.northpass.com/Crayon/architectBadge.png {% endcomment %}

<main class="np-main np-dashboard np-subpage-container np-max-width">
  <div class="row np-flex-center">
    <div class="col-xs-12">
      <div class="np-dashboard-header">
        <div class="np-resource-title">Hi {{current_person.first_name}}! &#128075;</div>
        <div class="np-resource-subtitle">This is what’s relevant to you right now in Competitive Advantage Academy</div>
      </div>
    </div>    
    {% comment %}<div class="np-grid-spacing col-xs-12 col-md-6">
      <div class="np-dashboard-achievements-panel col-xs-12 row">
        <div class="np-resource-title col-xs-5">Achievements</div>
        <div class="col-xs-7">
          <div class="np-dashboard-medal-card">
            <div class="col-xs-12 row" style="margin: 0">
              {% for course in courses.in_catalog %}
                {% if course.name == 'Activator Certification Course' %}
                  {% if course.progress == 100 %}
                    <img class="np-dashboard-medal-icon" src="{{course.properties.course_badge}}" alt="{{course.name}}-medal-icon"/>
                  {% else %}
                    <div class="np-dashboard-medal-circle"></div>
                  {% endif %}
                {% endif %}
              {% endfor %}
              {% for course in courses.in_catalog %}
                {% if course.name == 'Architect Certification Course' %}
                  {% if course.progress == 100 %}
                    <img class="np-dashboard-medal-icon" src="{{course.properties.course_badge}}" alt="{{course.name}}-medal-icon"/>
                  {% else %}
                    <div class="np-dashboard-medal-circle"></div>
                  {% endif %}
                {% endif %}
              {% endfor %}
              {% for course in courses.in_catalog %}
                {% if course.name == 'Accelerator Certification Course' %}
                  {% if course.progress == 100 %}
                    <img class="np-dashboard-medal-icon" src="{{course.properties.course_badge}}" alt="{{course.name}}-medal-icon"/>
                  {% else %}
                    <div class="np-dashboard-medal-circle"></div>
                  {% endif %}
                {% endif %}
              {% endfor %}
              <div class="np-dashboard-medal-circle"></div>
              <div class="np-dashboard-medal-circle"></div>
              <div class="np-dashboard-medal-circle"></div>
            </div>
          </div>
        </div>
      </div>
    </div>{% endcomment %}
  </div>

    <div class="row dashboard-section-courses">
      <div class="col-xs-12 col-sm-6 col-lg-4">

        {% for course in courses.in_catalog %}
          {% if course.name == 'Activator Certification Course' %}
            <div class="np-md-flex-wrapper" style="text-align: center;">
              <div class="np-dashboard-resources-title">
                Beginner
              </div>
            </div>
            {% include 'cards_course' with course %}
          {% endif %}
        {% endfor %}
      </div>

      <div class="col-xs-12 col-sm-6 col-lg-4">
        {% for course in courses.in_catalog %}
          {% if course.name == 'Architect Certification Course' %}
            <div class="np-md-flex-wrapper" style="text-align: center;">
              <div class="np-dashboard-resources-title">
                Intermediate
              </div>
            </div>
            {% include 'cards_course' with course %}
          {% endif %}
        {% endfor %}
      </div>

      <div class="col-xs-12 col-sm-6 col-lg-4">
        {% for course in courses.in_catalog %}
          {% if course.name == 'Accelerator Certification Course' %}
            <div class="np-md-flex-wrapper" style="text-align: center;">
              <div class="np-dashboard-resources-title">
                Advanced
              </div>
            </div>
            {% include 'cards_course' with course %}
          {% endif %}
        {% endfor %}
      </div>
        {% comment %}{% if courses.enrolled.any? %}
          {% assign course_limiter = 0 %}
          {% if categories.enrolled.any? %}
            {% assign all_categories = categories.enrolled | map: "name" %}
            {% for enrolled_category in all_categories %}
              {% for course in courses.enrolled%}
                  {% if course_limiter < 1%}
                    <div class="np-md-flex-wrapper" style="text-align: center;">
                      <div class="np-dashboard-resources-title">
                        {{ course.name }}
                      </div>
                      <div class="np-dashboard-resources-category">
                        {{ enrolled_category }}
                      </div>
                      {% 
                        include "filter_by_progress", 
                        label: "Filter by Progress:", 
                        default_option: "All Courses",
                        topic: enrolled_category,
                      %}
                    </div>
                    {% include 'cards_course' with course %}
                    
                    {% assign course_limiter = course_limiter | plus: 1 %}
                  {% endif %}
              {% endfor %}
            {% endfor %}
          {% else %}
            {% assign enrolled_category = "Not Categorized" %}
            {% for course in courses.enrolled%}
              {% if course_limiter < 1%}
                <div class="np-md-flex-wrapper" style="text-align: center;">
                  <div>
                    <div class="np-dashboard-resources-title">
                      {{ course.name }}
                    </div>
                    <div class="np-dashboard-resources-category">
                        {{ enrolled_category }}
                      </div>
                  </div>     
                </div>
                {% include 'cards_course' with course %}

                {% assign course_limiter = course_limiter | plus: 1 %}
              {% endif %}
            {% endfor %}
          {% endif %}
        {% else %}
            <div class="np-dashboard-resources-title" style="margin-bottom:19px;">
              Courses
            </div>
            {% capture message %}
              {% t shared.zero_state.courses.index,
                key: current_school.course_vocabulary
              %}
            {% endcapture %}
            <div style="margin-bottom:3rem;">
              {% include "courses_zero_state", message: message %}
        {% endif %}{% endcomment %}
    </div>

  </div>
  </div>
</main>
{% include "footer" %}
{% comment %}<script>
  // Creates the custom dropdown and dropdown functionality
  var x, i, j, l, ll, selElmnt, a, b, c;
  /* Look for any elements with the class “select-wrapper”: */
  x = document.getElementsByClassName("progress-filter");
  l = x.length;
  for (i = 0; i < l; i++) {
    selElmnt = x[i].getElementsByTagName("select")[0];
    ll = selElmnt.length;
    a = document.createElement("DIV");
    a.setAttribute("class", "select-selected");
    a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
    x[i].appendChild(a);
    b = document.createElement("DIV");
    b.setAttribute("class", "select-items select-hide");
    for (j = 1; j < ll; j++) {
      c = document.createElement("DIV");
      c.innerHTML = selElmnt.options[j].innerHTML;
      c.addEventListener("click", function(e) {
          var y, i, k, s, h, sl, yl;
          s = this.parentNode.parentNode.getElementsByTagName("select")[0];
          sl = s.length;
          h = this.parentNode.previousSibling;
          for (i = 0; i < sl; i++) {
            if (s.options[i].innerHTML == this.innerHTML) {
              s.selectedIndex = i;
              h.innerHTML = this.innerHTML;
              y = this.parentNode.getElementsByClassName("same-as-selected");
              yl = y.length;
              for (k = 0; k < yl; k++) {
                y[k].removeAttribute("class");
              }
              this.setAttribute("class", "same-as-selected");
              break;
            }
          }

          filterCourses(this);
    
          h.click();
      });
      b.appendChild(c);
    }
    x[i].appendChild(b);
    a.addEventListener("click", function(e) {
      e.stopPropagation();
      closeAllSelect(this);
      this.nextSibling.classList.toggle("select-hide");
      this.classList.toggle("select-arrow-active");
    });
  }

  function closeAllSelect(elmnt) {
    var x, y, i, xl, yl, arrNo = [];
    x = document.getElementsByClassName("select-items");
    y = document.getElementsByClassName("select-selected");
    xl = x.length;
    yl = y.length;
    for (i = 0; i < yl; i++) {
      if (elmnt == y[i]) {
        arrNo.push(i)
      } else {
        y[i].classList.remove("select-arrow-active");
      }
    }
    for (i = 0; i < xl; i++) {
      if (arrNo.indexOf(i)) {
        x[i].classList.add("select-hide");
      }
    }
  }

  /* If the user clicks anywhere outside the select box,
  then close all select boxes: */
  document.addEventListener("click", closeAllSelect);
  $(".select-items div").each(function() {
    if($( this ).text() == $(".select-selected").text()) {
      $(this).addClass("same-as-selected");
    }
  });

  function filterCourses(selectedItem) {
        
    let filterGroup = $(selectedItem).closest(".progress-filter").data("topic");
    let selectedFilter = $(selectedItem).text().replace(" ", "-").toLowerCase();
    let carouselGroup = $('.courses-carousel[data-topic="' + filterGroup + '"]');

    carouselGroup.slick('slickUnfilter');

    if (selectedFilter != "all-courses") {
      carouselGroup.slick('slickFilter', `.${selectedFilter}`);
    }

  }
</script>{% endcomment %} -->

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