{% include "header", current_page_orgin: "catalog" %}
<main class="np-main np-page-container page--course-overview">

	{% comment %} Get the full size background image by removing the modifier from the URL {% endcomment %}
	{% assign course_image_full_size = course.image_url | replace: '/resize=width:820,height:500,fit:crop/', '/' %} 
	
	<div class="page-background-image" style="background-image: url({{ course_image_full_size }})"></div>
	<div class="np-card">
		<div class="np-card-container">
			<div class="np-resource-header details-card__header np-card-padding-dynamic">
				{% include "course_header" %}
			</div>
			<div class="np-divider"></div>
			<div class="details-card__card-content np-card-padding-dynamic">
				
				{% if course.full_description and course.full_description.size > 0 %}
					{% include "course_description" %}
				{% endif %}

				<div class="cta__container">
					{% if course.enrolled? and course.started? %}
						{% include "course_progress_and_cta" %}
					{% else %}
						{% include "course_cta_button" %}
					{% endif %}
				</div>

				{% if course.instructors and course.instructors.any? %}
					<div class="np-card-content-divider">
						{% include "course_instructors" %}
					</div>
				{% endif %}

				{% include "course_outline" %}

				{% if course.events and course.events.any? %}
					<div class="np-card-content-divider">
						{% include "course_events" %}
					</div>
				{% endif %}
				
				{% include "course_cta_button" %}
			</div>
		</div>
	</div>
</main>
{% include "footer" %}