{% for course in courses.in_catalog %}
	{% for category in course.categories %}
		{% if category.name contains "Featured Courses" %}
			<div class="np-card" style="width:100%">
				<div class="np-card-container">
					<div class="np-image-wrapper">
						{% if course.ribbon %}
							<div class="np-card-ribbon">
								{{ course.ribbon }}
							</div>
						{% endif %}
						<div class="course-img-content">
							<h3 class="np-card-content-title">
								{{ course.name }}
							</h3>
						</div>
						<img
							class="np-card-image"
							alt="{{ course.name }}"
							src="{{ course.image_url }}"
						>
					</div>
					<div class="np-card-content np-card-content-vertical np-card-padding">
						{% if course.short_description != "" %}
							<div class="np-card-content-subtitle">
								{{ course.short_description }}
								{% endif %}
							</div>
						<div class="np-card-content-footer">
							<div class="np-card-content-progress np-button-color">
						{% t shared.progress, count: course.progress %}
							</div>
					{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
							{% if course.has_to_restart? %}
								{% include "course_version_outdated_popup", path: course_path %}
							{% endif %}
							<a class="np-button np-button-wide" href="{{ course_path }}">
						View
							</a>
						</div>
					</div>
				</div>
			</div>
		{% endif %}
	{% endfor %}
{% endfor %}