{% for group in current_person.groups %}
  {% if group.enrollment_code == "176629fa82da1d03f3d58c81e751e61b9836a46d" %}
    {% include "styles_hh" %}
  {% elsif group.enrollment_code == "1817d8c96780f13abbf0f2023e3b26b3bd43d248" %}
    {% include "styles_at" %}
  {% elsif group.enrollment_code == "ccd2aa2f1e41ebbac8fa878f806e3ccc20ae3f38" or 
          group.enrollment_code == "aa6fe8d22ec1e75d2e8c54c6d5452dcd585e415d" %}
      {% include "styles_hh" %}
  {% endif %}
{% endfor %}

{% assign card_arrow =
  '<svg height="16" viewBox="0 0 17 16" width="17" xmlns="http://www.w3.org/2000/svg"><path d="m14.7784165 7.26072607c-.142115-.14873429-.3349593-.23230626-.5360522-.23230626s-.3939372.08357197-.5360523.23230626l-5.45775708 5.71089113v-12.17953799c0-.43745327-.33922088-.79207921-.75767104-.79207921-.41845017 0-.75767105.35462594-.75767105.79207921v12.17953799l-5.45901988-5.71089113c-.29853224-.29080803-.76374223-.28222719-1.05227556.01940932-.28853334.30163652-.29674143.78797312-.01856618 1.10006263l7.28753267 7.61980198 7.28753262-7.61980198c.2954447-.30924625.2954447-.81022569 0-1.11947195z" fill="#black" transform="matrix(0 -1 1 0 .5 15.5)"/></svg>'
%}

{%  assign external_icon =
  '<svg height="12" viewBox="0 0 13 12" width="13" xmlns="http://www.w3.org/2000/svg"><path d="m14.7784165 7.26072607c-.142115-.14873429-.3349593-.23230626-.5360522-.23230626s-.3939372.08357197-.5360523.23230626l-5.45775708 5.71089113v-12.17953799c0-.43745327-.33922088-.79207921-.75767104-.79207921-.41845017 0-.75767105.35462594-.75767105.79207921v12.17953799l-5.45901988-5.71089113c-.29853224-.29080803-.76374223-.28222719-1.05227556.01940932-.28853334.30163652-.29674143.78797312-.01856618 1.10006263l7.28753267 7.61980198 7.28753262-7.61980198c.2954447-.30924625.2954447-.81022569 0-1.11947195z" fill="#5e6ebf" transform="matrix(-.70710678 -.70710678 .70710678 -.70710678 6.146447 16.960155)"/></svg>'
%}

{%  assign download_icon =
  '<svg height="16" viewBox="0 0 15 16" width="15" xmlns="http://www.w3.org/2000/svg"><path d="m14.7784165 7.26072607c-.142115-.14873429-.3349593-.23230626-.5360522-.23230626s-.3939372.08357197-.5360523.23230626l-5.45775708 5.71089113v-12.17953799c0-.43745327-.33922088-.79207921-.75767104-.79207921-.41845017 0-.75767105.35462594-.75767105.79207921v12.17953799l-5.45901988-5.71089113c-.29853224-.29080803-.76374223-.28222719-1.05227556.01940932-.28853334.30163652-.29674143.78797312-.01856618 1.10006263l7.28753267 7.61980198 7.28753262-7.61980198c.2954447-.30924625.2954447-.81022569 0-1.11947195z" fill="black"/></svg>'
%}

<div class="uk-container uk-container-center school-website-course-index-list uk-margin-top uk-margin-bottom">
  <div class="uk-padding-horizontal">
    {% if current_school.apps.instructor_led_training.active? %}
      {% if current_person.upcoming_registered_events.any? %}
        {% include "events" %}
      {% else %}
        {% include "events_empty" %}
      {% endif %}
    {% endif %}

    {% if my_content.learning_paths? %}
      {% include "my_paths" %}
    {% endif %}

<div class="grid">
  <div class="grid__item grid__item--tablet-up-half hh-margin-b" style="width: 100%;">
    <h2>My Courses</h2>
    <p class="text-major">
      
    </p>
  </div>
</div>

    <div class="uk-grid uk-grid-flex uk-margin-left-remove">
      {% comment %} {% include "filters" with "" %} {% endcomment %}
      {% if current_school.filtering_enabled? and current_person.filterable_categories.count > 0 %}
        <div class="uk-width-1-1 uk-padding">
      {% else %}
        <div class="uk-width-1-1 uk-padding">
      {% endif %}
        <ul class="grid--equal-height school-website-course-list uk-grid-match" data-uk-grid-match="{target:'.uk-panel'}">
          {% for course in my_content.courses %}
            {% if course.progress < 100 and course.progress > 0 %}
              {% include "course" %}
            {% endif %}
          {% endfor %}
        </ul>
      </div>
    </div>

<div class="grid">
  <div class="grid__item grid__item--tablet-up-half hh-margin-b" style="width: 100%;">
    <h2>Completed Courses</h2>
    <p class="text-major">
      
    </p>
  </div>
</div>

    <div class="uk-grid uk-grid-flex uk-margin-left-remove">
      {% comment %} {% include "filters" with "" %} {% endcomment %}
      {% if current_school.filtering_enabled? and current_person.filterable_categories.count > 0 %}
        <div class="uk-width-1-1 uk-padding">
      {% else %}
        <div class="uk-width-1-1 uk-padding">
      {% endif %}
        <ul class="grid--equal-height school-website-course-list uk-grid-match" data-uk-grid-match="{target:'.uk-panel'}">
          {% for course in my_content.courses %}
            {% if course.progress == 100 %}
              {% include "course" %}
            {% endif %}
          {% endfor %}
        </ul>
      </div>
    </div>
  </div>
</div>
<style>
.grid {
  padding-left:0%;
  padding-right:0%;
}
.uk-panel-badge {
    position: absolute;
    top: 0;
    right: 18px;
    z-index: 1;
}
.uk-badge {
    display: inline-block;
    padding: 0 5px;
    background: #07a9cb;
    font-size: 10px;
    font-weight: bold;
    line-height: 14px;
    color: #fff;
    text-align: center;
    vertical-align: middle;
    width: auto;
}
.uk-margin-top {
    margin-top: 5% !important;
}
</style>