Gainsight/Custom_Templates/customer_templates/Walmart Spark Prod/_course_outline.html.liquid

<div class="np-course-outline"><div class="np-text-title np-course-outline-title">Contents</div><div class="np-course-outline-content"><ol class="np-course-outline-content-section">{% assign activity_count = 0 %}{% assign num_of_sections = course.sections | size %}{% assign num_of_activities_in_first_section = course.sections.first.activities | size %}{% for section in course.sections %}<li class="np-course-outline-content-section-list">{% if num_of_activities_in_first_section > 1 or num_of_sections > 1 %}<div class="np-course-outline-content-section-name">{{ section.name }}</div>{% endif %}<ol class="np-course-outline-content-activity">{% for activity in section.activities %}{% assign activity_count = activity_count | plus: 1 %}<li class="np-course-outline-content-activity-list">{% if activity.completed? %}<svg class="np-course-outline-content-activity-icon icon-check" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12Z" fill="#3171FF"/><path d="M7 12.2478L10.2561 15.5039L16.76 9" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>{% if activity.locked? %}<span class="np-course-outline-content-activity-title">{{ activity.title }}</span>{% else %}{% include "course_activity_unlocked", class: "np-course-outline-content-activity-link-completed" %}{% endif %}<div class="np-list-bar-completed np-course-outline-content-activity-list-bar"></div>{% else %}<div class="np-course-outline-content-activity-icon number-circle">{{ activity_count }}</div>{% if activity.locked? %}<span class="np-course-outline-content-activity-title">                      {{ activity.title }}</span>{% else %}{% include "course_activity_unlocked", class: "np-course-outline-content-activity-link" %}{% endif %}<div class="np-course-outline-content-activity-list-bar"></div>{% endif %}</li>{% endfor %}</ol></li>{% endfor %}    </ol></div></div>