{% assign categories = '' | split: '' %}
{% for cat in course.categories %}
  {% assign cat_name = cat.name | split: '!@#$%^&*()' %}
  {% assign categories = categories | concat: cat_name %}
{% endfor %}
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}

{% case course.properties.difficulty %}
{% when "Beginner" %}
  {% assign diff = 1 %}
{% when "Advanced" %}
    {% assign diff = 2 %}
{% when "Expert" %}
    {% assign diff = 3 %}
{% else %}
    {% assign diff = 0 %}
{% endcase %}

{% if course.properties.course_time < 10 %}
    {% assign time = 1 %}
{% elsif course.properties.course_time < 30 %}
    {% assign time = 2 %}
{% elsif course.properties.course_time < 60 %}
    {% assign time = 3 %}
{% elsif course.properties.course_time < 120 %}
    {% assign time = 4 %}
{% else %}
    {% assign time = 5 %}
{% endif %}


<div class="course-card col-12 col-lg-6 col-xl-4" category='{{categories | join: '+'}}' diff="{{ diff }}" time="{{ time }}">
    <a class="course-card-image-wrapper" href="{{course_path}}">
        <img
        class="course-card-image"
        alt="{{ course.name }}"
        src="{{ course.image_url }}"
        >
        {% if course.ribbon and course.ribbon.size > 0 %}
            <div class="course-card-image-ribbon">
                {{ course.ribbon }}
            </div>
        {% endif %}
    </a>
    <div class="course-card-content">
        <a class="course-card-content-title" href="{{course_path}}">
            {{ course.name }}
        </a>
        <div class="course-card-content-time" time>
            {{ course.properties.course_time }}
        </div>
        <div class="course-card-content-description">
            {{course.full_description}}
        </div>
        <div class="course-card-content-footer">
            <a class="course-card-button" href="{{ course_path }}">
                {% if course.started? %}
                    Continue course <i class="fa-solid fa-angle-right"></i>
                {% else %}
                    Start course <i class="fa-solid fa-angle-right"></i>
                {% endif %}
            </a>
            {% if course.has_to_restart? %}
                {% include "course_version_outdated_popup", path: course_path %}
            {% endif %}
        </div>
    </div>
</div>