{% comment %} Initialize Variables {% endcomment %}
{% assign show_learning_paths_section = false %}
{% assign show_events_section = false %}
{% assign learning_path_section_classes = "" %}
{% assign event_section_classes = "" %}
{% assign learning_path_card_classes = "col-md-6" %}
{% assign event_card_classes = "col-x-sm-6 col-sm-6 col-md-4 col-lg-3" %}

{% comment %} Determine if learning paths are enabled and the user is enrolled in at least one learning path {% endcomment %}
{% if features.learning_paths? and learning_paths.enrolled and learning_paths.enrolled.any? %}
	{% assign show_learning_paths_section = true %}
{% endif %}

{% comment %} Determine if events are enabled and the user is registsered for at least one event {% endcomment %}
{% if features.training_events? and training_events.enrolled and training_events.enrolled.any? %}
	{% assign show_events_section = true %}
{% endif %}

{% comment %} Determine whether special classes need to be added to non course sections and the cards within {% endcomment %}
{% if show_learning_paths_section %}
	{% assign learning_path_section_classes = "col-md-8 col-lg-6" %}
	{% assign learning_path_card_classes = "" %}
{% endif %}

{%if show_events_section%}
	{% assign event_section_classes = "col-md-4 col-lg-6" %}
	{% assign event_card_classes = "col-x-sm-6 col-sm-6 col-md-12 col-lg-6" %}
{%endif%}

{% include "header", current_page_orgin: "dashboard" %}
<main class="np-main np-dashboard np-subpage-container">
	
	<div class="page__header-wrapper">
		<h1 class="np-resource-title">My Dashboard</h1>
	</div>

	<div class="page__primary-content">

		<div class="blocks-layout">

			{% comment %} Show the first featured course as a banner {% endcomment %}
			{% if courses.featured and courses.featured.any? %}
				<div>
					{% include "banner_course", course: courses.featured.first, button_text: "Get Started" %}
				</div>
			{% endif %}

			{% comment %} Show this section if either the event section or learning path section has content {% endcomment %}
			{% if show_learning_paths_section or show_events_section %}
				
				<div class="blocks-layout">

					{% if show_learning_paths_section %}
						<div class="{{ learning_path_section_classes }}">
							<h2 class="np-dashboard-resources-title">
								Learning Paths
							</h2>
							{% include "learning_paths_index", items: learning_paths.enrolled, card_classes: learning_path_card_classes %}
						</div>
					{% endif %}

					{% if show_events_section %}
						<div class="{{ event_section_classes }}">
							<h2 class="np-dashboard-resources-title">
								Upcoming Events
							</h2>
							{% include "training_events_dashboard", card_classes: event_card_classes %}
						</div>					
					{% endif %}

				</div>

			{% endif %}
			
			<div>
				<h2 class="np-dashboard-resources-title">
					My Courses
				</h2>
				{% if courses.enrolled and courses.enrolled.any? %}

					{% comment %} Sort enrolled courses by progress {% endcomment %}
					{% assign enrolled_courses_sorted = courses.enrolled | sort_natural: "short_description" | reverse | sort_natural: "progress" | reverse %}

					{% comment %} Divide courses by progress/completion state {% endcomment %}
					{% assign courses_completed = enrolled_courses_sorted | where: "completed?", true %}
					{% assign courses_in_progress = enrolled_courses_sorted | where: "completed?", false | where: "started?", true %}
					{% assign courses_enrolled = enrolled_courses_sorted | where: "started?", false %}

					{% comment %} In Progress & Enrolled courses {% endcomment %}
					{% if courses_in_progress.size > 0 or courses_enrolled.size > 0 %}
						<h3 class="dashboard-layout__subtitle">
							Courses In Progress
						</h3>
						<div class="blocks-layout">

							{% comment %} In Progress courses {% endcomment %}
							{% if courses_in_progress.size > 0 %}
								{% for course in courses_in_progress %}
									{% include "cards_course", course: course, card_classes: "col-x-sm-6 col-sm-6 col-md-4 col-lg-3" %}
								{% endfor %}
							{% endif %}

							{% comment %} Enrolled courses {% endcomment %}
							{% if courses_enrolled.size > 0 %}
								{% for course in courses_enrolled %}
									{% include "cards_course", course: course, card_classes: "col-x-sm-6 col-sm-6 col-md-4 col-lg-3" %}
								{% endfor %}
							{% endif %}

						</div>
					{% endif %}

					{% comment %} Completed courses {% endcomment %}
					{% if courses_completed.size > 0 %}
						<h3 class="dashboard-layout__subtitle">
							Completed Courses
						</h3>
						<div class="blocks-layout">
							{% for course in courses_completed %}
								{% include "cards_course", course: course, card_classes: "col-x-sm-6 col-sm-6 col-md-4 col-lg-3" %}
							{% endfor %}
						</div>
					{% endif %}

				{% else %}
					{% capture message %}
						{% t shared.zero_state.courses.index,
							key: current_school.course_vocabulary
						%}
					{% endcapture %}
					{% assign message = message | replace: "Courses", "tutorials" %}
					{% include "courses_zero_state", message: message, filters_applied: false %}
				{% endif %}
			</div>
		</div>
	</div>
</main>
{% include "footer" %}
}}