{#{{ dump(cat) }} #}
<a href="{{path('courseDetail',{'courseCode':cat["courseCode"]})}}" class="c-card" id="Code{{cat.courseCode|upper}}">
<span class="c-card__header">
{% if cat['image-path'] is defined and cat['image-path'] is not null %}
<span class="c-card__icon">
{% include 'parts/_img.html.twig' with {'imageName': cat['image-path'], 'imageAlt':cat['alt-text'], 'imagePath':''} %}
</span>
{% endif %}
<span class="c-card__title" style="color:{{cat["courselist_title_hex_color"]}}">{{ cat["courseTitle"] }}</span>
<span class="c-card__id">Course code: <span class="title">{{ cat["courseCode"]}}</span></span>
{% if cat['courseInstanceStopPress'] is not null %}
<div class="alert {{cat["courseInstanceStopPress-alertClass"]}}">
{{ cat["courseInstanceStopPress"]|raw}}
</div>
{% endif %}
</span>
<span class="c-card__info" style="color:{{cat["courselist_info_hex_color"]}}; font-weight:{{cat["courselist_info_font_weight"]}}">
<span class="c-card__startDate" style="color:{{cat["courselist_startdate_hex_color"]}}">{{ cat["StartDate"]}}</span>
<span class="c-card__times">Times: <span class="title">{{ cat["times"]}}</span></span>
<span class="c-card__duration">Duration: <span class="title">{{ cat["duration"]}}</span></span>
<span class="c-card__locationLabel">
Location: <span class="title">{{ cat["locationLabel"]}}</span>
</span>
<span class="c-card__fees">Fee: <span class="title">{{ cat["fees"]}}</span> </span>
{% if cat['tutor'] is not null %}
<span class="c-card__courseInstanceStopPress">Tutor: <span class="title">{{ cat["tutor"]}}</span></span>
{% endif %}
<span class="c-card__availabiity">Availability: <span class="title">{{ cat["availabiity"]| capitalize}}</span></span>
</span>
{#<span class="c-card__badges">
<span class="c-card__badge c-card__badge--bordered">{{ cat["countOfAvailableCourses"] }} available</span>
</span>#}
{#<span class="c-card__progress js-progress" data-progress="{{course.progress}}">
<span class="c-card__progress-header">
<span class="c-card__status">{{ course.status }}</span>
<span class="c-card__value">{{ course.progress }}%</span>
</span>
<span class="c-card__progress-container">
<span class="c-card__progress-bar js-progress-bar" style="transform: translateX(-100%);"></span>
</span>
</span>#}
</a>