{% 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">
  <div class="row np-flex-center">
    <div class='my-webinars'>
      <div class='section-title'>
        My Webinars
      </div>
      {% if training_events.enrolled and training_events.enrolled.size > 0 %}
        {% for training_event in training_events.enrolled %}
          {% for session in training_event.sessions %}
            {% if session.registered? %}
              <div class='dashboard-event'>
                On {{ session.month }} {{ session.day }} at {{ session.starts }} {{ session.time_zone }} is your {{ session.title }} event that is being held online 
                <a href='{{ session.session_url }}' class='dashboard-event-link'>Join</a>
              </div>
            {% endif %}
          {% endfor %}
        {% endfor %}
      {% else %}
        <div class='section-none-text'>
          You haven't registered for any webinars yet. 
        </div>
        <button class='section-none-button'>
          <a class="section-none-link" href="/app/training_events">
            Discover Webinars
          </a>
        </button>
      {% endif %}
    </div>
    <div class='my-paths'>
      <div class='section-title'>
        My Paths
      </div>
      <div class='section-subtitle'>
        Learning Paths in which you're currently enrolled
      </div>
      {% if learning_paths.enrolled and learning_paths.enrolled.size > 0 %}
        <div class='section-content'>
          <div class='filter-section'>
            <div class='filter-title'>Filter by:</div>
            {% assign lp_categories = '' | split: '' %}
            {% for lp in learning_paths.enrolled %}
              {% for cat in lp.categories %}
                {% assign cat_name = cat.name | split: '!@#$%^&*()' %}
                {% assign lp_categories = lp_categories | concat: cat_name %}
              {% endfor %}
            {% endfor %}
            {% assign lp_categories = lp_categories | uniq %}
              <div class='filter-element filter-element-selected' filter-type='lp' category-name='none'>
                All
              </div>
            {% for cat in lp_categories %}
              <div class='filter-element' filter-type='lp' category-name='{{cat}}'>
                {{cat}}
              </div>
            {% endfor %}
          </div>
          <div class='tiles-section'>
            {% for learning_path in learning_paths.enrolled %}
              {% include 'cards_learning_path_new' with learning_path %}
            {% endfor %}
          </div>
        </div>
      {% else %}
        <div class='section-none-text'>
          You haven't enrolled into any learning_paths yet. 
        </div>
        <button class='section-none-button'>
          <a class="section-none-link" href="/app/learning_paths">
            Discover Paths
          </a>
        </button>
      {% endif %}
    </div>
    <div class='my-courses'>
      <div class='section-title'>
        My Courses
      </div>
      <div class='section-subtitle'>
        Courses in which you're currently enrolled
      </div>
      {% if courses.enrolled and courses.enrolled.size > 0 %}
      <div class='section-content'>
        <div class='filter-section'>
          <div class='filter-title'>Filter by:</div>
          {% assign lp_categories = '' | split: '' %}
          {% for lp in courses.enrolled %}
            {% for cat in lp.categories %}
              {% assign cat_name = cat.name | split: '!@#$%^&*()' %}
              {% assign lp_categories = lp_categories | concat: cat_name %}
            {% endfor %}
          {% endfor %}
          {% assign lp_categories = lp_categories | uniq %}
            <div class='filter-element filter-element-selected' filter-type='co' category-name='none'>
              All
            </div>
          {% for cat in lp_categories %}
            <div class='filter-element' filter-type='co' category-name='{{cat}}'>
              {{cat}}
            </div>
          {% endfor %}
        </div>
        <div class='tiles-section'>
          {% for course in courses.enrolled %}
            {% include 'cards_course_new' with course %}
          {% endfor %}
        </div>
      </div>
      {% else %}
        <div class='section-none-text'>
          You haven't enrolled into any courses yet. 
        </div>
        <button class='section-none-button'>
          <a class="section-none-link" href="/app/catalog">
            Discover Courses
          </a>
        </button>
      {% endif %}
    </div>
  </div>
</main>
{% include "footer" %}

<style>
  .np-dashboard {
    background: white;
  }
  .row {
    flex-direction: column;
    margin-right: -1rem;
    margin-left: -1rem;
    display: inline-block;
  }
  .tiles-section {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
  }
  .section-content {
    display: flex;
    flex-direction: row;
    border-top: 1px solid #ededed !important;
    padding: 1rem 0;
  }
  .section-title {
    margin-top: 30px;
    font-size: 24px;
    font-weight: 600;
    line-height: 30px;
    margin-bottom: 15px;
    color: #444;
  }
  .section-subtitle {
    font-size: 20px;
    font-weight: 600;
    line-height: 24px;
    margin-bottom: 45px;
    color: #444;
  }
  .section-none-text {
    margin-bottom: 15px;
    color: #606060;
    font-size: 16px;
  }
  .section-none-button {
    background: #9b4b87;
    color: white;
    padding: 0 20px;
    text-align: center;
    margin: auto;
    font-size: 16px;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    min-height: 30px;
    line-height: 39px;
    margin: 10px 0
  }
  .section-none-button:hover {
    background: #4b2346 !important;
  }
  .section-none-link {
    color: white;
    text-decoration: none;
  }
  .section-none-link:hover {
    color: white;
  }
  .dashboard-event {
    padding: 10px 0;
    display: flex;
    justify-content: space-between;
  }
  .dashboard-event-link {
    color: #9b4b87;
    margin-left: 15px;
    text-decoration: none;
  }
  .dashboard-event-link:hover {
    color: #4b2346;
  }
  .filter-section {
    width: 25%;
  }
  .filter-element {
    color: #9b4b87;
    font-size: 18px;
    margin-top: 8px;
    cursor: pointer;
  }
  .filter-element:hover {
    color: #4b2346;
  }
  .filter-element-selected {
    font-weight: 700;
  }  
  .filter-title {
    font-size: 20px;
    font-weight: 600;
  }
  @media (min-width:1200px) and (max-width:1640px) {
    .row .np-card {
      padding: 0 1rem 2rem;
    }
  }
  @media (min-width:768px) and (max-width:1200px) {
    .row .np-card {
      padding: 0 0.7rem 1.4rem;
    }
  }
  @media screen and (max-width: 1400px) {
    .filter-section {
      width: 20%;
    }
  }
  @media screen and (max-width: 768px) {
    .section-content {
      flex-direction: column;
    }
    .filter-section {
      width: 100%;
      margin-bottom: 15px;
    }
  }
  .np-subpage-container {
    padding:20px 4% 40px;
  }
  .my-webinars {
    padding: 1rem;
    border-top: 1px solid #ededed !important;
  }
  .my-paths {
    padding: 1rem;
    border-top: 1px solid #ededed !important;
  }
  .my-courses {
    padding: 1rem;
    border-top: 1px solid #ededed !important;
  }
</style>


<script>
  $('[filter-type]').each(function(x){
    $(this).attr('category-name', $(this).attr('category-name').replaceAll(' ', '').replaceAll('+', ' '))
  })
  $('.filter-element[filter-type="co"]').click(function(){
    $('.filter-element[filter-type="co"]').removeClass('filter-element-selected');
    $(this).toggleClass('filter-element-selected');
    if($(this).attr('category-name')=='none') {
      $('.np-card[filter-type="co"]').show()
    }
    else {
      $('.np-card[filter-type="co"]').hide();
      $('.np-card[category-name~='+$(this).attr('category-name')+'][filter-type="co"]').show()
    }
  })
  $('.filter-element[filter-type="lp"]').click(function(){
    $('.filter-element[filter-type="lp"]').removeClass('filter-element-selected');
    $(this).toggleClass('filter-element-selected');
    if($(this).attr('category-name')=='none') {
      $('.np-card[filter-type="lp"]').show()
    }
    else {
      $('.np-card[filter-type="lp"]').hide();
      $('.np-card[category-name~='+$(this).attr('category-name')+'][filter-type="lp"]').show()
    }
  })
</script>