Files
Gainsight/Custom_Templates/customer_templates/Gainsight University/_cards_course.html.liquid
2024-10-18 16:38:15 -04:00

70 lines
2.5 KiB
Plaintext

<div class="np-card course-card">
<div class="np-card-container">
{% if course.ribbon %}
<div class="np-card-ribbon">
{{ course.ribbon }}
</div>
{% endif %}
<img
class="np-card-image"
alt="{{ course.name }}"
src="{{ course.image_url }}">
<div class="np-card-content np-card-content-vertical np-card-padding">
<h3 class="np-card-content-title">
{{ course.name }}
</h3>
<div class="np-card-content-subtitle">
{{ course.instructor_names }}
</div>
<div class="np-card-content-subtitle short-desc">
{{ course.short_description }}
</div>
{% comment %} <div class="card-info">
<div class="card-info-label">LESSONS</div>
<div class="card-info-value">{{ course.activities_count }}</div>
</div> {% endcomment %}
{% if course.properties.course_duration %}
<div class="card-info">
<div class="card-info-label">DURATION</div>
<div class="card-info-value">{{ course.properties.course_duration }}</div>
</div>
{% endif %}
{% if current_person.signed_in? %}
{% if course.progress == 0 %}
<div class="card-info">
<div class="card-info-label">PROGRESS</div>
<div class="card-info-value">{% t shared.progress
, count: course.progress %}</div>
</div>
{% else %}
<div class="card-info np-button-color">
<div class="np-progress-bar-container">
<div style="width: {{ course.progress }}%" class="np-button-background-color np-card-progress-bar"></div>
</div>
<div class="card-info-value">{{ course.progress }}%</div>
</div>
{% endif %}
{% endif %}
<div class="np-card-content-footer">
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
{% if course.has_to_restart? %}
{% include "course_version_outdated_popup"
, path: course_path %}
{% endif %}
<a class="np-button np-button-wide" href="{{ course_path }}">
{% if current_person.signed_in? %}
{% if course.progress == 0 %}
Start Course
{% elsif course.progress == 100 %}
View Course
{% else %}
Continue
{% endif %}
{% else %}
Learn More
{% endif %}
</a>
</div>
</div>
</div>
</div>