<div class="np-card card--horizontal {{ card_classes }}">
	<div class="np-card-container">
		<div class="card__image" style="background-image: url({{ learning_path.image_url }})">
			<div class="np-card-ribbon np-hidden-mobile">
				<i class="fa fa-book-open" aria-hidden="true"></i>
				{{ learning_path.items.count }} Tutorial{% if learning_path.items.count > 1%}s{% endif %}
			</div>
		</div>
		<div class="np-card-text-wrapper">

			<div class="np-card-content np-card-padding np-card-content-vertical">
				<h3 class="np-card-content-title">
					{{ learning_path.name }}
				</h3>
				
				{% if learning_path.has_instructors? %}
					<div class="np-card-content-subtitle">
						{{ learning_path.instructor_names }}
					</div>
				{% endif %}

				<div class="np-card-ribbon np-hidden-desktop">
					<i class="fa fa-book-open" aria-hidden="true"></i>
					{{ learning_path.items.count }} Tutorial{% if learning_path.items.count > 1%}s{% endif %}
				</div>
				
				{% comment %} Currently hiding the description {% endcomment %}
				{% comment %} 
				{% if learning_path.description and learning_path.description.size > 0 %}
					<div class="np-hidden-mobile np-card-content-description">
						{{ learning_path.description }}
					</div>
				{% endif %}
				{% endcomment %}

				<div class="np-card-content-footer">
					<a class="np-button" href="{% route learning_path, id: learning_path.id %}">
						<span class="np-hidden-desktop">View</span>
						<span class="np-hidden-mobile">View Path</span>
					</a>
					{% if learning_path.enrolled? %}
						<div class="np-card-content-progress
						np-button-color">
							{% if learning_path.completed? %}
								Complete
							{% elsif learning_path.started? == false %}
								Enrolled
							{% else %}
								{{ learning_path.progress }}% Complete
							{% endif %}
						</div>
					{% endif %}
				</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>
