{% include "header", current_page_orgin: "learning_paths" %}

{% assign lp_items_all_optional = true %}
{% for item in learning_path.items %}
	{% unless item.optional? %}
		{% assign lp_items_all_optional = false %}
	{% endunless %}
{% endfor %}

<main class="np-main np-page-container page--learning-path-overview">

{% assign learning_path_image_full_size = learning_path.image_url | replace: '/resize=width:820,height:500,fit:crop/', '/' %}

	<div class="blocks-layout">
		
		<div class="col-md-5 col-lg-6">
			<div class="np-card">
				<div class="details-card__card-container np-card-container">
					<div class="np-resource-header details-card__header np-card-padding-dynamic">
						<div class="np-top-title">
							{{ learning_path.name }}
						</div>
					</div>
					<div class="np-divider"></div>
					<div class="details-card__card-content np-card-padding-dynamic">
						{% if learning_path.description and learning_path.description.size > 0 %}
							{% include "learning_path_description" %}
						{% endif %}

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

						{% endif %}
						
					</div>
				</div>
			</div>
		</div>
		<div class="col-md-7 col-lg-6">
				<div class="cta__container cta--outline {% if lp_items_all_optional %}all-optional-items{% endif %}">
					{% include "learning_path_progress_and_cta" %}
				</div>
			{% include "learning_path_outline" %}
		</div>

	</div>
</main>
{% include "footer" %}

<style>

.cta__container.cta--outline.all-optional-items {
	display:none;
}

.page--learning-path-overview {
	background: #8B78FA;
}

.np-learning-path-outline-item .np-card-container {
	flex-direction: column;
	overflow: hidden;
}

.np-learning-path-outline-item .card__image {
	width:100%;
	padding:16px;
	text-align:center;
}

.np-learning-path-outline-item .card__image > img {
	max-width:100%;
	max-height:200px;
}

.np-learning-path-outline-item .card__image .np-card-ribbon {
	right:22px;
	top:22px;
}

.np-learning-path-outline-content {
	margin-left: 0;
	padding: 0 16px 16px;
}

.np-learning-path-outline-item .np-card-content-title {
	font-size:18px;
	margin-bottom: 12px;
}

.outline-card__icon-container {
	width: auto;
	border-radius: 30px;
	padding: 6px 16px;
	min-width: 115px;
	text-align: center;
	margin-right:0;
}

.np-learning-path-outline-item .np-card-content-progress {
	font-size:14px;
}

@media (min-width:768px) {

	.np-learning-path-outline-item .np-card-container {
		flex-direction: row;
		align-items: stretch;
	}

	.np-learning-path-outline-item .card__image {
		width:40%;
		max-width: 300px;
	}

	.np-learning-path-outline-item .card__image > img {
		max-height:130px;
	}

	.np-learning-path-outline-content {
		padding: 16px;
		display:flex;
		flex-direction:row;
		justify-content: space-between;
		height:auto;
	}

	.np-learning-path-outline-content .text-wrapper {
		display:flex;
		flex-direction:column;
	}

	.np-learning-path-outline-item .np-card-content-title {
		font-size:16px;
		flex:1;
	}

	.outline-card__icon-container {
		margin-left:16px;
	}

}

@media (min-width:1400px) {
	.np-learning-path-outline-item .np-card-content-title,
	.np-learning-path-session-card .np-learning-path-outline-name {
		font-size:18px;
	}

	.np-learning-path-outline-item .np-card-content-progress {
    font-size: 16px;
	}
}

</style>