{% assign course_ribbon = course.ribbon | downcase %}
<div class="np-card">
	<div class="np-card-container">
		<div class="card__image" style="background-image: url({{ course.image_url }})">
			{% unless course.properties.course_image == "NULL" or course.properties.course_image == "" %}
				<img class="course-img-static" src="{{course.properties.course_image}}" />
			{% endunless %}
			{% if course.ribbon and course.ribbon.size > 0 %}
				<div class="np-card-ribbon">
					{{ course.ribbon }}
				</div>
			{% endif %}
		</div>
		<div class="np-card-content np-card-content-vertical np-card-padding">
			<h3 class="np-card-content-title">
				{{ course.name }}
			</h3>
			{% if course.instructor_names and course.instructor_names.size > 0 %}
				<div class="np-card-content-subtitle">
					{{ course.instructor_names }}
				</div>
			{% endif %}
			{% if course.short_description and course.short_description.size > 0 %}
				<div class="np-card-content-description">
					{{ course.short_description | split: " --- " | last }}
				</div>
			{% endif %}
			<div class="np-card-content-footer">
				{% capture course_path %}{% route course, id: course.id %}{% endcapture %}				
		
				{% if course_ribbon == "hochladen" or course_ribbon == "upload" %}
					<a class="np-button np-button-wide" href="{{ course_path }}">
						<span data-lang="DE">Hochladen</span>
						<span data-lang="EN">Upload</span>					
					</a>
				{% else %}
					<a class="np-button np-button-wide" href="{{ course_path }}">
						<span data-lang="DE">{% t shared.view %}</span>
						{% if course.progress > 0 and course.progress < 100 %}
							<span data-lang="EN">Continue</span>
						{% else %}
							<span data-lang="EN">View</span>
						{% endif %}
					</a>
				{% endif %}


				{% if course.enrolled? %}
					{% unless course_ribbon == "demnächst" or course.name == "Neue Lerninhalte" or course_ribbon == "coming soon" or course_ribbon == "New learning content" %}
						{% if course.has_to_restart? %}
							{% include "course_version_outdated_popup", path: course_path %}
						{% endif %}
						<div class="np-card-content-progress np-button-color">
							{% if course.completed? %}
								<span data-lang="DE">Abgeschlossen</span>
								<span data-lang="EN">Completed</span>
							{% elsif course.started? == false %}
								<span data-lang="DE">0% abgeschlossen</span>
								<span data-lang="EN">0% completed</span>
							{% else %}
								<span data-lang="DE">{% t shared.progress, count: course.progress %}</span>
								<span data-lang="EN">{{course.progress}}% completed</span>
							{% endif %}
						</div>
					{% endunless %}
				{% endif %}
			</div>
		</div>
	</div>
</div>

<style>

.card__image {
	overflow:hidden;
}

.course-img-static {
	  max-width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
</style>