{% assign content_expired = false %}
{% assign now = "now" | date: "%m/%d/%Y" %}

{% if now >= course.properties.content_expiration %}
  {% assign content_expired = true %}
{% endif %}

{% assign categories = '' | split: '' %}
{% for cat in course.categories %}
    {% if cat.name contains "~" %}
        {% assign cat_name = cat.name | remove: "~" %}
        {% assign cat_name = cat_name | split: "]" %}
        {% assign str_parts_size = cat_name | size %}
        {% assign cat_name = cat_name | slice: 1, 2 %}
    {% else %}
      {% assign cat_name = cat.name | split: '!@#$%^&*()' %}
    {% endif %}

  {% assign categories = categories | concat: cat_name %}
{% endfor %}

{% unless content_expired %}
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
<div class="catalog-card" data-category="{{categories | join: '+'}}" href="{{course_path}}" >
    <div class="catalog-card-img-container">
     {% if course.ribbon %}
        <div class="np-card-ribbon">
          {{ course.ribbon }}
        </div>
      {% endif %}
        <img
            class="np-card-image"
            alt="{{ course.name }}"
            src="{{ course.image_url }}"
        >
    </div>

    <div class="catalog-card-content np-card-content-vertical">
        <div class="catalog-card-title">
            {{ course.name }}
        </div>
          <div class="catalog-card-desc">
            {{ course.full_description }}
        </div>

        {% comment %} {% for course_category in course.categories %}
            <div class="catalog-card-category">{{course_category.name}}</div>
        {% endfor %} {% endcomment %}
        <div class="np-card-content-footer">
            <div style="display:flex; align-items:center;">
            <div class="np-card-content-progress np-button-color">
                {% if course.progress > 0 and course.progress < 100 %}
                    {% t shared.progress, count: course.progress %}
                {% elsif course.progress == 100 %}
                    Viewed
                {% else %}
                    Not viewed
                {% endif %}

            </div>
            <div class="card-details">
                {% unless course.properties.course_length contains 'NULL' %}
                   <span style="margin-right:16px;">|</span> <strong>{{course.properties.course_length}}</strong>
                {% endunless %}
            </div>
        </div>
            {% capture course_path %}{% route course, id: course.id %}{% endcapture %}
        <a class="np-button np-button-wide" href="{{ course_path }}">
           {% if course.started? == false %}
                Start
            {% elsif course.progress > 0 and course.progress < 100 %}
                {% t shared.continue %}
            {% elsif course.completed? %}
                Resume
            {% endif %}
        </a>
            {% if course.has_to_restart? %}
                {% include "course_version_outdated_popup", path: course_path %}
            {% endif %}
        </div>
    </div>
</div>
{% endunless %}


<style>
.catalog-card {
    background: #f3f3f3;
    margin-bottom: 32px;
}

.np-card-image {
    border-radius: 0;
    width: 100%;
    height: auto;
    overflow: hidden;
    top: 0;
    left: 0;
}

.catalog-card-content  {
    padding: 24px 32px;
    width:100%;
}

.catalog-card-title {
    font-size:24px;
    margin-bottom:16px;
}

.catalog-card-desc {
    font-size:16px;
    line-height:20px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.np-button.np-button-wide {
    background-color: #cc0033;
    color: white;
    display: inline-flex;
    width: auto;
    height: 40px;
}

.catalog-card-category {
    margin-right:8px;
    display: inline-block;
    background: rgba(0, 153, 153, 0.8);
    padding: 3px 6px;
    color: #fff;
    font-size: 12px;
    font-weight:700;
}

.np-card-content-progress {
    margin:0 16px 0 0;
}

.card-details {
  font-size:14px;
}

@media (min-width: 1170px) {
    .catalog-card {
        display:flex;
        min-height:200px;
    }

    .catalog-card-img-container {
        width:36%;
        min-width: 36%;
        position:relative;
    }

    .np-card-image {
        height: 100%;
        position: absolute;
        max-width:unset;
    }
}



</style>
