<div class="np-card-container np-card-padding np-product-outline-container">
  <div class="np-product-outline-content">
    {% if item.available? %}
      {% if item.location %}
        <span class="np-product-location">{{ item.location }} |</span>
      {% endif %}
      <span class="np-product-date">{{ item.time }} {{ item.time_zone }}, {{ item.date }}</span>
      <a class="np-product-outline-name np-top-title" href="{{ item.preview_path }}">{{ item.name }}</a>
    {% else %}
      <span class="np-product-outline-name np-top-title">{{ item.name }}</span>
    {% endif %}
    <div class="np-learning-path-outline-caption">{{ item.caption }}</div>
    <div class="np-product-outline-base-bottom np-product-ilt-bottom">
      <div class="np-product-badge np-product-badge-catalog np-product-badge-outline">
      <i class="far {{ item.icon }} np-product-badge-icon np-product-badge-catalog-icon"></i>
      <h3 class="np-product-badge-name np-product-badge-catalog-name">{{ item.formatted_type }}</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 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>
      <p class="np-product-outline-section-content">{{ item.description }}</p>
    </div>
    {% if item.instructors %}
      <div class="np-card-content-divider np-product-outline-spacer">
        <h3 class="np-product-outline-section-headline">
          {% t shared.instructors %}
        </h3>
        <div class="np-content-instructors-content row">
            <div class="np-content-instructors-content-item col-xs-12 col-lg">
                <div class="np-content-instructors-content-name">
                  {{ item.instructors }}
                </div>
            </div>
        </div>
      </div>
    {% endif %}
  </div>
  </div>
</div>
