<div class="np-course-outline np-card-content-divider">
	<h3 class="np-card-heading">
		Outline
	</h3>
	<div class="np-course-outline-content">
		<ol class="np-course-outline-content-section">
			{% for section in course.sections %}
				<li class="np-course-outline-content-section-list">
					<div class="np-course-outline-content-section-name np-text-title-bold np-text-title-bold">
						{{ section.name }}
					</div>
					<ol class="np-course-outline-content-activity">
						{% for activity in section.activities %}

							<li class="np-course-outline-content-activity-list">
								<i 
									class="fas np-course-outline-content-activity-icon
										{% if activity.completed? %} 
											fa-check-circle np-progress-color
										{% else %} 
											fa-circle
										{% endif %}"
									{% if activity.completed? %}
										aria-label="Chapter Complete"
									{% else %}
										aria-hidden="true"
									{% endif %}
								>
								</i>

								{% comment %} If the activity is locked show a locked icon and then a text title {% endcomment %}
								{% if activity.locked? %}
									<i 
										class="far fa-lock-alt np-course-outline-content-activity-icon-locked"
										aria-label="Chapter Locked"
									></i>
									{% include "course_activity_locked" %}

								{% comment %} If the user is not enrolled in the course show a text title {% endcomment %}
								{% elsif course.enrolled? == false %}
									{% include "course_activity_locked" %}

								{% comment %} Otherwise include a link {% endcomment %}
								{% else %}
									{% include "course_activity_unlocked", activity_classes: "np-course-outline-content-activity-link-completed" %}
								{% endif %}
								
								<div class="np-course-outline-content-activity-list-bar
								{% if activity.completed? %} np-progress-background-color {% endif %}"></div>
							</li>
						{% endfor %}
					</ol>
				</li>
			{% endfor %}
		</ol>
	</div>
</div>
