{% include "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">
    {% 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-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">
          {% include "filter_by_product", page: 'Dashboard' %}
        </div>
      </div>
      
      <div id="dashboard-resources-pane">
        {% 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>

<style>
  .dashboard-main-title{
    color: #000000;
    font-size: 32px;
    font-weight: 400;
    line-height: 25px;
  }

  .np-dashboard-resources-title{
    color: #000000;
    font-size: 24px;
    font-weight: 600;
    line-height: 25px;
  }

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

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

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

  .view-swapper-button-active{
    border-bottom: 2px solid #000000;
    margin-bottom: -1px;
  }

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

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

  .product-filter-container{
    margin: 0;
    margin-bottom: 6px;
  }

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

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

    .np-dashboard-resources-title{
      margin-bottom: 25px;
    }

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

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

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

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