<div class="np-card np-no-horizontal-padding" course-vehicle="{{ course.properties.course_vehicle }}">
  <div class="np-card-container">
    <div class="np-learning-path">
      <div class="np-card-text-wrapper">
        <div class="np-hidden-desktop np-card-header">
          <div class='np-card-header-left'>
            <i class="np-button-color np-learning-path-items-icon far fa-graduation-cap" style='padding-right: 10px;'></i>
            <div class="np-card-header-type" style='font-size: 0.75rem !important; align-self: center;'>Course</div>
          </div>
          {% comment %} <div class='np-card-header-right'>
            <div class='np-card-header-right-rating' style='color: #bac4ca; font-size: 0.75rem !important; align-self: center; font-weight: 700;'>
              {{course.properties.np_course_rating}}
            </div>
            <i class='np-card-header-right-star far fa-star' style='padding-left: 10px; color: #ff2c00'></i>
          </div> {% endcomment %}
        </div>
        <div class="np-hidden-mobile np-card-header">
          <div class="np-card-header-type">Course</div>
          <i class="np-card-header-icon far fa-road"></i>
        </div>

        <div class="np-card-content np-card-padding np-card-content-vertical">
          <div class='np-card-header-rate' style='display: flex; justify-content: space-between; '>
            <h3 class="np-card-content-title" style='margin: 0;'>
              {% if course.name contains "v2" %}
                {{ course.name | split: ' v2' | first }}
              {% elsif course.name contains "v3" %}
                {{ course.name | split: ' v3' | first }}    
              {% else %}
                {{ course.name }}
              {% endif %}
            </h3>

            {% comment %} <div class='np-card-header-right np-hidden-mobile'>
              <div class='np-card-header-right-rating' style='color: #bac4ca; font-size: 0.75rem !important; align-self: center; font-weight: 700;'>
                {{course.properties.np_course_rating}}
              </div>
              <i class='np-card-header-right-star far fa-star' style='padding-left: 10px; color: #ff2c00'></i>
            </div> {% endcomment %}
          </div>
          <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="np-hidden-mobile np-card-content-progress
          np-button-color">
            {% t shared.progress, count: course.progress %}
          </div>

          <div class="np-hidden-mobile np-card-progress-bar-container">
            <div
              style="width: {{ course.progress }}%"
              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">
              {% t shared.progress, count: course.progress %}
            </div>
            <a class="np-button" href="https://doordash.northpass.com/courses/{{course.id}}">
              {% t shared.view %}
            </a>
            <span class="np-hidden-mobile np-learning-path-items">
              <i class="np-button-color np-learning-path-items-icon far fa-graduation-cap"></i>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="np-card-stack">
    <div class="np-card-stack-level-1"></div>
    <div class="np-card-stack-level-2"></div>
  </div>
</div>

<style>
  .np-card-header-left {
    display: flex;
  }

  .np-card-header-right {
    display: flex;
  }
</style>