<div class="np-card course-card">
  <div class="np-card-container">
    <img
      class="np-card-image"
      alt="{{ item.name }}"
      src="{{ item.image_url }}">
    <div class="np-card-content np-card-content-vertical np-card-padding">
      <h3 class="np-card-content-title">
        {{ item.name }}
      </h3>
      <div class="card-info">
        <div class="card-info-label">TYPE</div>
        <div class="card-info-value">
          <i class="far {{ item.icon }} np-product-badge-icon np-product-badge-catalog-icon"></i>
          {{ item.formatted_type | upcase }}
        </div>
      </div>
      {% unless item.free_course? %}
        <div class="card-info">
          <div class="card-info-label">PRICE</div>
          <div class="card-info-value">{{ item.formatted_price }}</div>
        </div>
      {% endunless %}
      {% if item.free_course? %}
        <div class="card-info">
          <div class="card-info-label">PROGRESS</div>
          <div class="card-info-value">{% t shared.progress, count: item.progress %}</div>
        </div>
      {% endif %}
      <div class="np-card-content-footer">
        {% if item.free_course? %}
          {% if item.has_to_restart? %}
            {% include "course_version_outdated_popup", path: item.path %}
          {% endif %}
          <a class="np-button np-button-wide" href="{{ item.path }}">
            {% if item.progress == 0 %}
              Start
            {% elsif item.progress == 100 %}
              View
            {% else %}
              Continue
            {% endif %}
          </a>
        {% else %}
          <a class="np-button np-button-wide" href="{{ item.path }}">
            {% t shared.learn_more %}
          </a>
        {% endif %}
        </a>
      </div>
    </div>
  </div>
</div>