{% if course.completed? %}
  {% assign wrapperClassStatus = "np-hidden-mobile np-card-content-progress np-button-color green-status" %}
  {% assign wrapperClassBar = "np-button-background-color np-card-progress-bar green-bar" %}
  {% assign wrapperClassButton = "np-top-button np-button-font-color np-button np-button-big green-button" %}
{% else %}
  {% assign wrapperClassStatus = "np-hidden-mobile np-card-content-progress np-button-color" %}
  {% assign wrapperClassBar = "np-button-background-color np-card-progress-bar" %}
  {% assign wrapperClassButton = "np-top-button np-button-font-color np-button np-button-big" %}
{% endif %}


<div class="np-card np-no-horizontal-padding">
  <div class="np-card-container">
    <div class="np-learning-path">
      <img
        alt="{{ course.name }}"
        class="np-card-image np-learning-path-image"
        src="{{ course.image_url }}"
      />

        <div class="np-card-content np-card-padding np-card-content-vertical">
          <h3 class="np-card-content-title">
            {{ course.name }}
          </h3>

          <div class="np-card-content-subtitle">
            {{ course.instructor_names }}
          </div>

          <div class="np-hidden-mobile np-card-content-description">
            {{ course.full_description }}
          </div>

          <div class="{{wrapperClassStatus}}">
            {% t shared.progress, count: course.progress %}
          </div>

          <div class="np-hidden-mobile np-card-progress-bar-container">
            <div
              style="width: {{ course.progress }}%"
              class="{{wrapperClassBar}}">
            </div>
          </div>

          <div class="np-mobile-view np-card-content-progress
            np-button-color">
              {% t shared.progress, count: course.progress %}
            </div>
            
            <div class="np-mobile-view np-card-progress-bar-container">
              <div
                style="width: {{ course.progress }}%"
                class="{{wrapperClassBar}}">
              </div>
            </div>

          <div class="np-card-content-footer">
            {%comment%}<div class="np-hidden-desktop np-card-content-progress
            np-button-color">
              {% t shared.progress, count: course.progress %}
            </div>{%endcomment%}

            <a
              class="{{wrapperClassButton}}"
            {% if course.enrolled? %}
                href="{% route course_viewer, course_id: course.id, learning_path_id: params.learning_path_id %}"
            {% else %}
                href="{% route course_enrollment, code: course.enrollment_code %}"
            {% endif %}
            >
              {% if course.enrolled? == false %}
                {% t shared.enroll %}
              {% elsif course.started? == false %}
                {% t shared.course.start, key: current_school.course_vocabulary %}
              {% elsif course.completed? %}
                {% t shared.course.view, key: current_school.course_vocabulary %}
              {% else %}
                {% t shared.continue %}
              {% endif %}
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
  {%comment%}<div class="np-card-stack">
    <div class="np-card-stack-level-1"></div>
    <div class="np-card-stack-level-2"></div>
  </div>{%endcomment%}
</div>

{%comment%}<div class="np-card">
  <div class="np-card-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 class="np-card-content np-card-content-vertical np-card-padding">
      <h3 class="np-card-content-title">
        {{ course.name }}
      </h3>
      <div class="np-card-content-subtitle">
        {{ course.instructor_names }}
      </div>


      <div class="np-card-content-footer">
        <div class="np-card-content-progress np-button-color">
          {% t shared.progress, count: course.progress %}
        </div>
        {% capture course_path %}{% route course, id: course.id %}{% endcapture %}
        {% if course.has_to_restart? %}
          {% include "course_version_outdated_popup", path: course_path %}
        {% endif %}


        <a class="np-button np-button-wide" href="{{ course_path }}">
          {% t shared.view %}
        </a>


        <a
          class="np-top-button np-button-font-color np-button np-button-big"
        {% if course.enrolled? %}
            href="{% route course_viewer, course_id: course.id, learning_path_id: params.learning_path_id %}"
        {% else %}
            href="{% route course_enrollment, code: course.enrollment_code %}"
        {% endif %}
        >
          {% if course.enrolled? == false %}
            {% t shared.enroll %}
          {% elsif course.started? == false %}
            {% t shared.course.start, key: current_school.course_vocabulary %}
          {% elsif course.completed? %}
            {% t shared.course.view, key: current_school.course_vocabulary %}
          {% else %}
            {% t shared.continue %}
          {% endif %}
        </a>
      </div>
    </div>


  </div>
</div>{%endcomment%}