<div class="np-card-container np-card-padding np-product-outline-container">
  <div class="np-product-outline-base-container">
    <img
      src="{{ item.image }}"
      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.instructors.any? %}
          {{ 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-graduation-cap 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.course %}</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>
      <p class="np-product-outline-section-content">{{ item.full_description }}</p>
    </div>
    {% if item.categories.any? %}
      <div class="np-card-content-divider np-product-outline-spacer">
        <h3 class="np-product-outline-section-headline">
          {% t .categories %}
        </h3>
        <div class="np-flex">
          {% for category in item.categories %}
            <div class="np-content-categories-content-item">
              {{ category.name }}
            </div>
          {% endfor %}
        </div>
      </div>
    {% endif %}
    {% if item.instructors.any? %}
      <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">
          {% for instructor in item.instructors %}
            <div class="np-content-instructors-content-item col-xs-12 col-lg">
              <img
                src="{{ instructor.avatar_url }}"
                class="np-content-instructors-content-image"
                alt="{{ instructor.name }}"
              >
              <div class="np-content-instructors-content-description">
                <div class="np-content-instructors-content-name">
                  {{ instructor.name }}
                </div>
                <div class="np-content-instructors-content-info np-text-light">
                  {{ instructor.title }}
                </div>
              </div>
            </div>
          {% endfor %}
        </div>
      </div>
    {% endif %}
  </div>
</div>
