{% include "header", current_page_orgin: "training_events" %}
<main class="np-main np-page-container np-training-session">	
	<div class="blocks-layout">

		<div class="col-md-8">
			<div class="np-card">
				<div class="np-card-container details-card__card-container">
					<div class="np-resource-header details-card__header np-card-padding-dynamic">
						<div class="np-top-title">
							{{ training_event.title }}
						</div>
						<div class="np-top-vocabulary">

							{% case training_event.event_type %}
								{% when "online" %}
									<i class="fa fa-laptop np-training-session-icon" aria-hidden="true"></i>
									<span data-lang="DE">{% t shared.event_types, key: training_event.event_type %}</span>
									<span data-lang="EN">Online Event</span>							
								{% when "in_person" %}
									<i class="fa fa-users-class np-training-session-icon" aria-hidden="true"></i>
									<span data-lang="DE">{% t shared.event_types, key: training_event.event_type %}</span>
									<span data-lang="EN">In-Person Event</span>	
							{% endcase %}

						</div>
					</div>
					<div class="np-divider"></div>
					<div class="np-card-padding-dynamic details-card__card-content">

						{% if training_event.description and training_event.description.size > 0 %}
							{% include "training_session_description" %}
						{% endif %}
						
					</div>
				</div>
			</div>
		</div>

		<div class="col-md-4">
			
			<div class="blocks-layout">
				<div class="np-card col-sm-6 col-md-12">
					<div class="np-card-container">
						<div class="np-card-content np-card-content-vertical np-card-padding">
							{% include "training_session_details" %}
							{% include "training_session_cta" %}
						</div>
					</div>
				</div>

				<div class="col-sm-6 col-md-12">
					<div class="np-training-session-sessions-title">
						<span data-lang="DE">{% t shared.more_sessions %}</span>
						<span data-lang="EN">More sessions</span>
					</div>
					{% if training_event.sessions and training_event.sessions.size > 1 %}
						{% include "training_session_more_sessions" %}
					{% else %}
						<div class="np-training-session-zero-state">
							<img
								alt="{% t .empty %}"
								class="np-zero-state-training-sessions"
							/>
							<div class="np-training-session-zero-state-text">
								<span data-lang="DE">{% t .empty %}</span>
								<span data-lang="EN">There are currently no other sessions for this event.</span>				
							</div>
						</div>
					{% endif %}
				</div>
			</div>

		</div>

	</div>
</main>
{% include "footer" %}