{% include "header" %}
{% include "course_version_outdated_alert", courses: courses.enrolled %}
{% include "sub_navigation" %}
{% comment %} {% if current_person.email contains '+preview' or current_person.email == 'kfelton@anthology.com'%}
  {% assign sub_levels_length = current_person.properties.subscription_levels | size %}
  {% if sub_levels_length > 0 %}
    {% include "product_bar" %}
  {% endif %}
{% endif %} {% endcomment %}
<main class="np-main np-dashboard np-subpage-container np-max-width">
  <div class="row np-flex-center">
    {% include "profile_card" %}

    <div class="col-xs-12 col-sm-7 col-md-8 col-lg-9 dashboard-learning-content">
      <div class="dashboard-main-title">
        Dashboard
      </div>
      <div class="dashboard-subtitle">
        Track Progress and Continue Learning
      </div>

      <div class='dashboard-control-panel' style="
      ">
        {%- comment -%} =============== THIS IS WHERE THE SWAPPER WILL LIVE =============== {%- endcomment -%}
        <div class="view-swapper-container">
          <div id="dashboard-view-button" class="view-swapper-button view-swapper-button-active" onclick="swapView()">
            Resources
          </div>
          <div id="events-view-button" class="view-swapper-button" onclick="swapView()">
            Live Events
          </div>
          {% assign completedCourseFound = false %}
          {% if courses.enrolled.any? %}
            {% for course in courses.enrolled %}
              {% if course.progress == 100 %}
                {% assign completedCourseFound = true %}
              {% endif %}
            {% endfor %}
          {% endif %}
          {% if completedCourseFound %}
            <div id="completed-view-button" class="view-swapper-button" onclick="swapView()">
              Completed
            </div>
          {% endif %}
        </div>

        {%- comment -%} =============== THIS IS WHERE THE PRODUCT FILTER WILL LIVE =============== {%- endcomment -%}
        <div class="filter-buttons-container">
          <div class="dashboard-filter-label">Filter By: </div>
          {% include "filter_by_product", page: 'Dashboard' %}
        </div>
      </div>
      
      <div id="dashboard-resources-pane">
        <div class="np-dashboard-resources-title">
          Your Resources
        </div>
        {% assign ipCourseFound = false %}
        {% if courses.enrolled.any? %}
          {% for course in courses.enrolled %}
            {% if course.progress > 0 and course.progress < 100 %}
              {% assign ipCourseFound = true %}
            {% endif %}
          {% endfor %}
        {% endif %}
        {% if ipCourseFound %}
          {% include "courses_index_in_prog", outerClass: "dashboard-courses-index" %}
        {% endif %}

        {%- comment -%} {% if courses.enrolled.any? %}
          {% include "courses_index", outerClass: "dashboard-courses-index" %}
        {% else %}
          {% capture message %}
            {% t shared.zero_state.courses.index,
              key: current_school.course_vocabulary
            %}
          {% endcapture %}
          {% include "courses_zero_state", message: message %}
        {% endif %} {%- endcomment -%}
      </div>

      <div id="dashboard-events-pane">
        {% include "training_events_index" %}
      </div>

      <div id="dashboard-completed-pane">
        {% assign completedCourseFound = false %}
        {% if courses.enrolled.any? %}
          {% for course in courses.enrolled %}
            {% if course.progress == 100 %}
              {% assign completedCourseFound = true %}
            {% endif %}
          {% endfor %}
        {% endif %}
        {% if completedCourseFound %}
          {% include "courses_index_completed", outerClass: "dashboard-courses-index" %}
        {% endif %}
      </div>
    </div>
  </div>
</main>
{% include "footer" %}

<script>
  let swapView = () => {
    console.log(event.target.classList);

    if(!event.target.classList.contains('view-swapper-button-active')){
      if(event.target.id == 'dashboard-view-button'){

        document.getElementById('events-view-button').classList.remove('view-swapper-button-active');
        if(document.getElementById('completed-view-button')){
          document.getElementById('completed-view-button').classList.remove('view-swapper-button-active');
        }
        event.target.classList.add('view-swapper-button-active');

        document.getElementById('dashboard-events-pane').style.display = 'none';
        document.getElementById('dashboard-completed-pane').style.display = 'none';
        document.getElementById('dashboard-resources-pane').style.display = 'block';

      } else if(event.target.id == 'events-view-button'){
        document.getElementById('dashboard-view-button').classList.remove('view-swapper-button-active');
        if(document.getElementById('completed-view-button')){
          document.getElementById('completed-view-button').classList.remove('view-swapper-button-active');
        }
        event.target.classList.add('view-swapper-button-active');

        document.getElementById('dashboard-resources-pane').style.display = 'none';
        document.getElementById('dashboard-completed-pane').style.display = 'none';
        document.getElementById('dashboard-events-pane').style.display = 'block';

      } else if(event.target.id == 'completed-view-button'){
        document.getElementById('dashboard-view-button').classList.remove('view-swapper-button-active');
        document.getElementById('events-view-button').classList.remove('view-swapper-button-active');
        event.target.classList.add('view-swapper-button-active');

        document.getElementById('dashboard-resources-pane').style.display = 'none';
        document.getElementById('dashboard-events-pane').style.display = 'none';
        document.getElementById('dashboard-completed-pane').style.display = 'block';
      }
    }
  }
</script>
{%- comment -%} {% assign swapper_spacer = 0 %}
{% for course in courses.enrolled %}
  {% unless course.progress == 0 %}
    {% assign swapper_spacer = 1 %}
  {% endunless %}
{% endfor %} {%- endcomment -%}

<style>
  .dashboard-main-title{
    color: #0a0a0a;
    font-size: 2em;
    font-weight: 900;
    line-height: 2.375REM;
    margin-bottom: 12px;
  }

  .dashboard-subtitle{
    color: #595959;
    font-size: 1.25rem;
    font-weight: 400;
    margin-bottom: 24px;
  }

  .np-dashboard-resources-title{
    color: #000000;
    font-size: 1.5em;
    font-weight: 600;
    line-height: 25px;
    margin-bottom: 25px;
    text-transform: none;
  }

  .dashboard-control-panel{
    align-items: center;
    border-bottom: 1px solid #F2F4F5;
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
    margin-top: 24px;
    margin-bottom: 30px;
  }

  .view-swapper-container{
    display: flex;
    flex-direction: row;
    height: 40px;
    justify-content: flex-start;
    width: 100%;
  }

  .view-swapper-button{
    align-items: center;
    color: #595959;
    display: flex;
    font-size: 15px;
    font-weight: 400;
    justify-content: center;
    text-align: center;
    width: 125px;
  }

  .view-swapper-button-active{
    background: #f2f4f5;
    color: #000;
    font-weight: 600;
    /* border-bottom: 2px solid #000000; */
    margin-bottom: -1px;
  }

  .view-swapper-button:hover{
    cursor: pointer;
  }

  .filter-buttons-container{
    display: flex;
    flex-direction: row;
    margin-bottom: 20px;
  }

  .dashboard-filter-label{
    color: #595959;
    font-size: 1em;
    font-weight: 700;
    padding-right: 10px;
  }

  #dashboard-events-pane,
  #dashboard-completed-pane{
    display: none;
  }

  .product-filter-container{
    margin: 0;
  }
  .course-card-wrapper.col-lg-4,
  .course-card-wrapper.col-sm-6 {
    max-width: 100% !important;
    padding: 0 !important;
  }
  .row.np-stretch-content {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 30px;
  }

@media only screen and (max-width: 1100px) {
  .row.np-stretch-content {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
  }

@media only screen and (max-width: 900px) {
  .row.np-stretch-content {
      grid-template-columns: minmax(0, 1fr);
    }
  }

@media only screen and (max-width: 768px) {
  .row.np-stretch-content {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
  }

@media only screen and (max-width: 600px) {
  .row.np-stretch-content {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  @media screen and (min-width: 768px){
    .np-dashboard{
      padding: 70px 24px;
    }

    .dashboard-main-title{
      margin-bottom: 16px;
    }

    .dashboard-control-panel{
      align-items: center;
      flex-direction: row;
      justify-content: space-between;
    }

    .view-swapper-container{
      margin-bottom: -38px;
      width: unset;
    }

    .dashboard-learning-content{
      margin: 0;
      padding: 0;
    }

    .dashboard-courses-index{
      margin: 0;
      /* margin-left: -10px; */
    }
  }
</style>

{%- comment -%} {% if swapper_spacer == 0 %}
  <style>
    .view-swapper-container{
      margin-bottom: 0 !important;
    }
  </style>
{% endif %} {%- endcomment -%}