{% capture icon %}
  fa-arrow-left
{% endcapture %}
{% include "mobile_header", title: "Resource Center", back_icon: icon, back_link: "javascript:sendMessage();" %}

{% include "sub_navigation" %}

<main class="np-main np-dashboard np-subpage-container np-max-width">
  <div class="row np-flex-center">
    <div class="col-xs-12 col-sm-8">
    {% if courses.enrolled.any? %}
      {% assign courses_in_progress = 0 %}
      {% assign enrolled_courses = courses.enrolled %}
      {% assign courses_ordered_by_progress = enrolled_courses | sort: "progress" %}
        {% for course in courses_ordered_by_progress %}  

          {% if course.progress > 0 %}
            {% assign courses_in_progress = courses_in_progress | plus: 1 %}   
            {% capture course_path %}{% route course, id: course.id %}{% endcapture %}
            <a href="{{ course_path }}" class="np-card-condensed dashboard-card">
              <div class="np-card-condensed-content-wrapper">
                <div class="title-wrapper">
                  
                  <div class="np-course-title">{{ course.name }}</div>
                  <div class="info-wrapper">
                  {% if course.properties.course_length != 'NULL' %}
                      <div class="card-content-length">
                        {{ course.properties.course_length }}
                      </div>
                    {% endif %}
                    <div class="labels-wrapper">       
                      {% if course.progress > 0 and course.progress < 100 %}
                        <div class="label label-orange">
                          In progress
                        </div>
                      {% elsif course.completed? %}
                        <div class="label label-gray">
                          Viewed
                        </div>
                      {% endif %}
                    </div> 
                  </div>
                </div>
              </div>
            </a>
          {% endif %}
        {% endfor %}

        {% if courses_in_progress == 0 %}
          <div class="np-dashboard-resources-container">
            <div class="courses-zero-state-img"></div>
            <div class="np-zero-state-text">
              <p>You haven't viewed any resources yet.<br>Visit <a href="/app/courses">All Resources</a> to see what's available.</p>
            </div>
          </div>
        {% endif %}
    {% endif %}
    </div>
  </div> 
</main>