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

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

{% unless content_expired %}
  <div class="np-card">
    <div class="np-card-container">
      {% if course.ribbon %}
        <div class="np-card-ribbon">
          {{ course.ribbon }}
        </div>
      {% endif %}
      <div class="np-card-image-content-top"></div>
      <img
        class="np-card-image"
        alt="{{ course.name }}"
        src="{{ course.image_url }}"
      >
    </div>
      <div class="np-card-content np-card-content-vertical np-card-padding course-card-content">
            <div class="course-title-vision">
                {{ course.name }}
            </div>
             <div class="course-desc">
                {{ course.full_description }}
            </div>
        <div class="np-card-content-footer">
          <div class="np-card-content-progress np-button-color">
            {% if course.progress > 0 and course.progress < 100 %}
              In progress
            {% elsif course.completed? %}
              Viewed
            {% else %}
              Not viewed
            {% endif %}

          </div>
            {% capture course_path %}{% route course, id: course.id %}{% endcapture %}
            <a
              class="np-button-font-color np-button" 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>
        </div>
    </div>
  </div>
{% endunless %}

<style>

  .course-card-content {
    color: black!important;
    padding: 22px 16px 16px;
  }

  .np-card-image {
    border-radius:0;
  }

  .np-card {
    margin-bottom: 10px!important;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .course-title-vision {
    font-family: "PlusJakartaSans-Bold", sans-serif!important;
    font-weight: 700;
    margin-bottom:8px;
    font-size:18px;
  }

  .course-desc {
    flex:2;
  }

  .np-card .np-card-content-footer .np-button {
    background-color:#cc0033;
    width:auto;
    color:#fff!important;
  }
</style>