<div class="np-card np-no-horizontal-padding learning-path-card">
  <div class="np-card-container">
    <div class="np-learning-path">
      <div class="learning-path-image-container">
        <img
          alt="{{ learning_path.name }}"
          class="np-card-image np-learning-path-image"
          src="{{ learning_path.image_url }}"
        />
      </div>
      <div class="np-card-text-wrapper">
        <div class="np-hidden-desktop np-card-header">
          <div class="np-card-header-type">{% t shared.learning_path.title %}</div>
          <div class="np-hidden-desktop  np-card-header-items-count">
            {{ learning_path.items.count }} {% t .items %}
          </div>
        </div>
        {% comment %} <div class="np-hidden-mobile np-card-header">
          <div class="np-card-header-type">{% t shared.learning_path.title %}</div>
        </div> {% endcomment %}

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

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

          {% comment %} <div class="np-hidden-mobile np-card-content-description">
            {{ learning_path.description }}
          </div> {% endcomment %}

          <div class="np-hidden-mobile np-card-content-progress
          np-button-color">
            {% if learning_path.progress == 100 %}
              <i class="far fa-check-circle"></i> <span>completed</span>
            {% elsif learning_path.progress > 0 and learning_path.progress < 100 %}
              <i class="fas fa-spinner"></i> <span>{% t shared.progress, count: learning_path.progress %}</span>
            {% else %}
              <i class="not-started-circle"></i> <span>{% t shared.progress, count: learning_path.progress %}</span>
            {% endif %}
          </div>

          <div class="np-hidden-mobile np-card-progress-bar-container">
            <div
              style="width: {{ learning_path.progress }}%; {% if learning_path.progress == 100 %}background-color: #16C466;{% endif %}"
              class="np-button-background-color np-card-progress-bar">
            </div>
          </div>

          <div class="np-card-content-footer">
            <div class="np-hidden-desktop np-card-content-progress
            np-button-color">
              {% if learning_path.progress == 100 %}
                <i class="far fa-check-circle"></i> <span>completed</span>
              {% elsif learning_path.progress > 0 and learning_path.progress < 100 %}
                <i class="fas fa-spinner"></i> <span>{% t shared.progress, count: learning_path.progress %}</span>
              {% else %}
                <i class="not-started-circle"></i> <span>{% t shared.progress, count: learning_path.progress %}</span>
              {% endif %}
            </div>
            <a class="np-button" href="{% route learning_path, id: learning_path.id %}">
              {% if learning_path.progress > 0 and learning_path.progress < 100 %}
                Continue
              {% else %}
                {% t shared.view %}
              {% endif %}
            </a>
            <span class="np-hidden-mobile np-learning-path-items">
              <svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M0.84375 0.9375H2.53125C2.98828 0.9375 3.375 1.32422 3.375 1.78125V3.46875C3.375 3.96094 2.98828 4.3125 2.53125 4.3125V7.40625H4.5C4.5 6.94922 4.85156 6.5625 5.34375 6.5625H7.03125C7.48828 6.5625 7.875 6.94922 7.875 7.40625V9.09375C7.875 9.58594 7.48828 9.9375 7.03125 9.9375H5.34375C4.85156 9.9375 4.5 9.58594 4.5 9.09375H2.53125V12.75C2.53125 12.9258 2.63672 13.0312 2.8125 13.0312H4.5C4.5 12.5742 4.85156 12.1875 5.34375 12.1875H7.03125C7.48828 12.1875 7.875 12.5742 7.875 13.0312V14.7188C7.875 15.2109 7.48828 15.5625 7.03125 15.5625H5.34375C4.85156 15.5625 4.5 15.2109 4.5 14.7188H2.8125C1.72266 14.7188 0.84375 13.8398 0.84375 12.75V8.25V4.3125C0.351562 4.3125 0 3.96094 0 3.46875V1.78125C0 1.32422 0.351562 0.9375 0.84375 0.9375ZM5.625 2.625C5.625 2.16797 5.97656 1.78125 6.46875 1.78125H17.1562C17.6133 1.78125 18 2.16797 18 2.625C18 3.11719 17.6133 3.46875 17.1562 3.46875H6.46875C5.97656 3.46875 5.625 3.11719 5.625 2.625ZM10.125 8.25C10.125 7.79297 10.4766 7.40625 10.9688 7.40625H17.1562C17.6133 7.40625 18 7.79297 18 8.25C18 8.74219 17.6133 9.09375 17.1562 9.09375H10.9688C10.4766 9.09375 10.125 8.74219 10.125 8.25ZM10.125 13.875C10.125 13.418 10.4766 13.0312 10.9688 13.0312H17.1562C17.6133 13.0312 18 13.418 18 13.875C18 14.3672 17.6133 14.7188 17.1562 14.7188H10.9688C10.4766 14.7188 10.125 14.3672 10.125 13.875Z" fill="#185A7D"/>
              </svg>
              <span class="np-learning-path-items-count">
                {{ learning_path.items.count }} Courses
              </span>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
