{% assign courses_in_progress = false %}
{% assign courses_not_started = false %}
{% assign courses_completed = false %}

{% assign lp_in_progress = false %}
{% assign lp_not_started = false %}
{% assign lp_completed = false %}

{% assign zero_state = false %}

{% for course in courses.enrolled %}
    {% if course.progress == 0 %}
        {% assign courses_not_started = true %}
    {% endif %}
    {% if course.progress > 0 and course.progress < 100 %}
        {% assign courses_in_progress = true %}
    {% endif %}
    {% if course.progress == 100  %}
        {% assign courses_completed = true %}
    {% endif %}
{% endfor %}

{% for learning_path in learning_paths.enrolled %}
    {% if learning_path.progress == 0 %}
        {% assign lp_not_started = true %}
    {% endif %}
    {% if learning_path.progress > 0 and learning_path.progress < 100 %}
        {% assign lp_in_progress = true %}
    {% endif %}
    {% if learning_path.progress == 100 %}
        {% assign lp_completed = 100 %}
    {% endif %}
{% endfor %}

{% if courses_in_progress == false and courses_not_started == false and courses_completed == false and lp_in_progress == false and lp_not_started == false and lp_completed == false %}
    {% assign zero_state = true %}
{% endif %}


<div class="dashboard-state-wrapper">
    {% if lp_not_started or courses_not_started %}
    <div class="state">
        <div class="np-dashboard-resources-title">Not Started</div>
        <div class="cards-wrapper">
            {% for course in courses.enrolled %}
                {% if course.progress == 0 %}
                    {% include "cards_course" with course %}
                {% endif %}
            {% endfor %}
            {% for learning_path in learning_paths.enrolled %}
                {% if learning_path.progress == 0 %}
                    {% include "cards_learning_path_vertical" with learning_path %}
                {% endif %}
            {% endfor %}
        </div>
    </div>
    {% endif %} 
    {% if courses_in_progress or lp_in_progress %}
    <div class="state">
        <div class="np-dashboard-resources-title">In Progress</div>
        <div class="cards-wrapper">
            {% for course in courses.enrolled %}
                {% if course.progress > 0 and course.progress < 100 %}
                    {% include "cards_course" with course %}
                {% endif %}
            {% endfor %}
            {% for learning_path in learning_paths.enrolled %}
                {% if learning_path.progress > 0 and learning_path.progress < 100 %}
                    {% include "cards_learning_path_vertical" with learning_path %}
                {% endif %}
            {% endfor %}
        </div>
    </div>
    {% endif %}
    {% if courses_completed or lp_completed %}
    <div class="state">
        <div class="np-dashboard-resources-title">Completed</div>
        <div class="cards-wrapper">
            {% for course in courses.enrolled %}
                {% if course.progress == 100 %}
                    {% include "cards_course" with course %}
                {% endif %}
            {% endfor %}
            {% for learning_path in learning_paths.enrolled %}
                {% if learning_path.progress == 100 %}
                    {% include "cards_learning_path_vertical" with learning_path %}
                {% endif %}
            {% endfor %}
        </div>
    </div>
    {% endif %}

    {% if zero_state %}
        {% include 'zero_message' %}
    {% endif %}
</div>

<style>
    .cards-wrapper {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  margin-left: -30px;
}
@media only screen and (max-width: 1000px) {
  .cards-wrapper {
    display: grid;
    grid-template-columns: repeat(2,1fr);
  }
}
@media only screen and (max-width: 768px) {
  .cards-wrapper {
    display: grid;
    grid-template-columns: repeat(1,1fr);
    margin-left: 0px;
  }
}
</style>