{% 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 %}

{% assign lp_course_required = 1 %}
{% if course.optional? %}
	{% assign lp_course_required = 0 %}
{% endif %}

<div class="lp-course" data-required="{{lp_course_required}}">
	<{{ 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">
				{% assign lp_image_not_cropped = item.image | replace: ',fit:crop/', '/' %} 
				<img src="{{lp_image_not_cropped}}">
				{% unless course.optional? %}
					<div class="np-card-ribbon">
						<span data-lang="DE">Erforderlich</span>
						<span data-lang="EN">Required</span>
					</div>
				{% else %}
					<div class="np-card-ribbon">
						Optional
					</div>
				{% endunless %}
			</div>
			<div class="np-card-content np-learning-path-outline-content np-card-padding">
				<div class="text-wrapper">
					<h3 class="np-card-content-title">
						{{ course.name }}
					</h3>

					<div class="np-hidden-mobile">
						{% if course.completed? %}
							<div class="outline-card__icon-container outline-card__icon-complete np-hidden-desktop">
								<i class="fas fa-check np-learning-path-outline-icon" aria-label="Course Completed"></i>
							</div>
						{% elsif element_type == "div" %}
							<div class="outline-card__icon-container outline-card__icon-locked np-hidden-desktop">
								<i class="fas fa-lock np-learning-path-outline-icon" aria-label="Course Locked"></i>
							</div>
						{% else %}
							<div class="outline-card__icon-container outline-card__icon-link np-hidden-desktop">
							{% if course.optional? %}
								{% if course.name == "Servicetraining" or course.name == "Kassentraining" %}
									<span data-lang="DE">
										{% if course.progress == 0 %}
											Start
										{% elsif course.progress > 0 and course.progress < 100 %}
											Fortsetzen
										{% else %}
											Anzeigen
										{% endif %}
									</span>
									<span data-lang="EN">
										{% if course.progress == 0 %}
											Start
										{% elsif course.progress > 0 and course.progress < 100 %}
											Continue
										{% else %}
											Review
										{% endif %}
									</span>
								  
								{% else %}
									<span data-lang="DE">Heft öffnen</span>
									<span data-lang="EN">Open booklet</span>
								{% endif %}
							{% else %}
								<span data-lang="DE">
									{% if course.progress == 0 %}
										Start
									{% elsif course.progress > 0 and course.progress < 100 %}
										Fortsetzen
									{% else %}
										Anzeigen
									{% endif %}
								</span>
								<span data-lang="EN">
									{% if course.progress == 0 %}
										Start
									{% elsif course.progress > 0 and course.progress < 100 %}
										Continue
									{% else %}
										Review
									{% endif %}
								</span>							
							{% endif %}
							</div>
						{% endif %}
					</div>
					{% 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">
							<span data-lang="DE">
								{% if course.completed? %}
									Vollständig
								{% else %}
									{{ course.progress }}% Vollständig
								{% endif %}
							</span>
							<span data-lang="EN">
								{% if course.completed? %}
									Complete
								{% else %}
									{{ course.progress }}% complete
								{% endif %}
							</span>
						</div>
						<div class="np-hidden-desktop">
							{% if course.completed? %}
								<div class="outline-card__icon-container outline-card__icon-complete np-hidden-desktop">
									<i class="fas fa-check np-learning-path-outline-icon" aria-label="Course Completed"></i>
								</div>
							{% elsif element_type == "div" %}
								<div class="outline-card__icon-container outline-card__icon-locked np-hidden-desktop">
									<i class="fas fa-lock np-learning-path-outline-icon" aria-label="Course Locked"></i>
								</div>
							{% else %}
								<div class="outline-card__icon-container outline-card__icon-link np-hidden-desktop">
								{% if course.optional? %}
									{% if course.name == "Servicetraining" or course.name == "Kassentraining" %}
										<span data-lang="DE">
											{% if course.progress == 0 %}
												Start
											{% elsif course.progress > 0 and course.progress < 100 %}
												Fortsetzen
											{% else %}
												Anzeigen
											{% endif %}
										</span>
										<span data-lang="EN">
											{% if course.progress == 0 %}
												Start
											{% elsif course.progress > 0 and course.progress < 100 %}
												Continue
											{% else %}
												Review
											{% endif %}
										</span>										
									{% else %}
										<span data-lang="DE">Heft öffnen</span>
									  <span data-lang="EN">Open booklet</span>
									{% endif %}
								{% else %}
									<span data-lang="DE">
										{% if course.progress == 0 %}
											Start
										{% elsif course.progress > 0 and course.progress < 100 %}
											Fortsetzen
										{% else %}
											Anzeigen
										{% endif %}
									</span>
									<span data-lang="EN">
										{% if course.progress == 0 %}
											Start
										{% elsif course.progress > 0 and course.progress < 100 %}
											Continue
										{% else %}
											Review
										{% endif %}
									</span>
								{% endif %}
								</div>
							{% 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 np-hidden-mobile">
						<i class="fas fa-check np-learning-path-outline-icon" aria-label="Course Completed"></i>
					</div>
				{% elsif element_type == "div" %}
					<div class="outline-card__icon-container outline-card__icon-locked np-hidden-mobile">
						<i class="fas fa-lock np-learning-path-outline-icon" aria-label="Course Locked"></i>
					</div>
				{% else %}
					<div class="outline-card__icon-container outline-card__icon-link np-hidden-mobile">
						{% if course.optional? %}
							{% if course.name == "Servicetraining" or course.name == "Kassentraining" %}
								<span data-lang="DE">
								 {% if course.progress == 0 %}
										Start
									{% elsif course.progress > 0 and course.progress < 100 %}
										Fortsetzen
									{% else %}
										Anzeigen
									{% endif %}
								</span>
								<span data-lang="EN">
								 {% if course.progress == 0 %}
										Start
									{% elsif course.progress > 0 and course.progress < 100 %}
										Continue
									{% else %}
										Review
									{% endif %}
								</span>
								{% else %}
									<span data-lang="DE">Heft öffnen</span>
									<span data-lang="EN">Open booklet</span>
								{% endif %}
						{% else %}
							<span data-lang="DE">
								{% if course.progress == 0 %}
									Start
								{% elsif course.progress > 0 and course.progress < 100 %}
									Fortsetzen
								{% else %}
									Anzeigen
								{% endif %}
							</span>
							<span data-lang="EN">
								{% if course.progress == 0 %}
									Start
								{% elsif course.progress > 0 and course.progress < 100 %}
									Continue
								{% else %}
									Review
								{% endif %}
							</span>
						{% endif %}
					</div>
				{% endif %}
			</div>
		</div>
	</{{ element_type }}>
</div>