{% comment %} Determine if the item should be a link or not {% endcomment %}
{% if learning_path.enrolled? and course.unlocked? %}
	{% assign element_type = "a" %}
{% else %}
	{% assign element_type = "div" %}
{% endif %}

<div>
	<{{ element_type }}
		class="np-learning-path-outline-item np-card card--horizontal"
		{% if element_type == "a" %}
			href="{% route learning_path_course, learning_path_id: learning_path.id, id: course.id %}"
		{% endif %}
	>
		<div class="np-card-container">
			<div class="card__image" style="background-image: url({{ item.image }})">
				{% if course.optional? %}
					<div class="np-card-ribbon">
						Optional
					</div>
				{% endif %}
			</div>
			<div class="np-card-content np-learning-path-outline-content np-card-padding">
				<div class="card__step-counter"></div>
				<h3 class="np-card-content-title">
					{{ course.name }}
				</h3>

				{% if course.instructors and course.instructors.size > 0 %}
					<div class="np-card-content-subtitle">
						{{ course.instructors }}
					</div>
				{% endif %}
				<div class="np-card-content-footer">
					<div class="np-card-content-progress">
						{% if course.completed? %}
							Complete
						{% elsif course.progress > 0 %}
							{{ course.progress }}% Complete
						{% endif %}
					</div>
				</div>
			</div>

			{% comment %} Use a different icon based on the state of the learning path and course {% endcomment %} 
			{% if course.completed? %}
				<div class="outline-card__icon-container outline-card__icon-complete">
					<i class="fas fa-check np-learning-path-outline-icon" aria-label="Tutorial Completed"></i>
				</div>
			{% elsif element_type == "div" %}
				<div class="outline-card__icon-container outline-card__icon-locked">
					<i class="fas fa-lock np-learning-path-outline-icon" aria-label="Tutorial Locked"></i>
				</div>
			{% else %}
				<div class="outline-card__icon-container outline-card__icon-link">
					<i class="fas fa-chevron-right np-learning-path-outline-icon" aria-label="Start Tutorial"></i>
				</div>
			{% endif %}

		</div>

	</{{ element_type }}>
</div>