<div class="np-card-container np-card-padding np-product-outline-container">
  <div class="np-product-outline-base-container">
    <img
      src="{{ item.image_url }}"
      alt="{{ item.name }}"
      class="np-product-outline-course-image"
    >
    <div class="np-product-outline-content">
      <div class="np-product-outline-name np-top-title">
        {{ item.name }}
      </div>

        <p class="np-product-outline-caption">
          {% if item.instructor_names %}
            {{ item.instructor_names }}
          {% endif %}
        </p>

      <div class="np-product-outline-base-bottom">
        <div class="np-product-badge np-product-badge-catalog np-product-badge-outline">
          <i class="far fa-road np-product-badge-icon np-product-badge-catalog-icon"></i>
          <h3 class="np-product-badge-name np-product-badge-catalog-name">{% t shared.product_types.learning_path %}</h3>
        </div>
        <button
          class="np-button np-product-outline-details-button"
          data-toggle-class-on-target="np-hidden"
          data-toggle-target=".np-expand-{{ id }}"
          data-toggle-outside
        >
          <span class="np-expand-{{ id }}">{% t shared.buttons.expand %}<i class="far fa-chevron-down np-expand-{{ id }}"></i></span>
          <span class="np-expand-{{ id }} np-hidden">{% t shared.buttons.collapse %} <i class="far fa-chevron-up np-hidden np-expand-{{ id }}"></i></span>
        </button>
      </div>
    </div>
  </div>
  <div class="np-expand-{{ id }} np-hidden">
    <div class="np-card-content-divider np-product-outline-spacer">
      <h3 class="np-product-outline-section-headline">{% t .about %}</h3>
      {{ item.description }}
    </div>
    <h3 class="np-product-outline-section-headline">{% t .content %}</h3>
    {% for learning_path_item in item.learning_path_items %}
      <div class="np-product-outline-lp-product-container">
        <div class="np-product-outline-lp-product-info">
          {% if learning_path_item.course? %}
            <h3 class="np-product-outline-name np-top-title">{{learning_path_item.name}}</h3>
            <p class="np-product-outline-caption">{{learning_path_item.instructor_names}}</p>
          {% elsif learning_path_item.training_event? %}
            {% if learning_path_item.available? %}
              <a class="np-product-outline-name np-top-title" href="{{ learning_path_item.preview_path }}">{{learning_path_item.name}}</a>
              <span class="np-product-date">{{ learning_path_item.time }} {{ learning_path_item.time_zone }}, {{ learning_path_item.date }}</span>
            {% else %}
              <span class="np-product-outline-name np-top-title">{{learning_path_item.name}}</span>
              <span class="np-product-date">{{ learning_path_item.caption }}</span>
            {% endif %}
          {% endif %}
        </div>
        <div class="np-product-badge np-product-badge-catalog">
          <i class="far {{ learning_path_item.icon }} np-product-badge-icon np-product-badge-catalog-icon"></i>
          <h3 class="np-product-badge-name np-product-badge-catalog-name">{{ learning_path_item.formatted_type }}</h3>
        </div>
      </div>
    {% endfor %}
  </div>
</div>
