<div class="np-card card--training-event {{ card_classes }}">
	<div class="np-card-container">
		<div class="np-card-content np-card-padding np-card-content-vertical">
			<h3 class="np-card-content-title">
				{{ training_event.title }}
			</h3>
			<div class="np-card-content-subtitle">
				{% case training_event.event_type %}
					{% when "online" %}
						Online Event
					{% when "in_person" %}
						In-Person Event
				{% endcase %}
			</div>
			{% if training_event.description and training_event.description.size > 0 %}
				<div class="np-card-content-description">

					{{ training_event.description | strip }}

				</div>
			{% endif %}
			<div class="np-card-training-session-date">

				{% comment %} Fallback to the first session {% endcomment %}
				{% assign session_to_display = training_event.sessions | first %} 
				{% comment %} Check for an enrolled session and preferrably display that {% endcomment %}
				{% assign enrolled_sessions = training_event.sessions | where: "registered?", true %}
				{% if enrolled_sessions and enrolled_sessions.size > 0 %}
					{% assign session_to_display = enrolled_sessions | first %}
				{% endif %}

				{% include "training_session_date", training_session: session_to_display %}
				{% if training_event.sessions and training_event.sessions.size > 1 %}
					<div class="session-date__other-info-container">
						<div class="session-date__other-info-wrapper">
							<i class="np-card-training-sessions-icon far fa-calendar-star" aria-hidden="true"></i>
							<span class="np-card-training-sessions-label">
								{{ training_event.sessions.size | minus: 1 }}
								{% if training_event.sessions.size == 2 %}
									Other Session
								{% else %}
									Other Sessions
								{% endif %}
							</span>
						</div>
					</div>
				{% endif %}
			</div>
			<div class="np-card-content-footer">
				<a
					class="np-button np-button-wide"
					href="{% route training_session, id: session_to_display.id %}"
				>
					{% t shared.view %} Event
				</a>
			</div>
		</div>
	</div>
</div>
