<div class='np-card'>
  <div class='event-header'>
    <div class='event-header-left'>
      <i class="far fa-thin fa-users"></i>
    </div>
    <div class='event-header-right'>
      <div class='event-header-right-type'>
        ZoomWebinar
      </div>
      <div class='event-header-right-title'>
        {{ training_event.title }}
      </div>
    </div>
  </div>
  <div class='event-sessions'>
    {% assign session_number = 0%}
    {% for session in training_event.sessions limit: 2 %}
      {% assign session_number = session_number | plus: 1 %}
      <div class='event-session'>
        <div class='event-session-number'>
          Session {{session_number}}
        </div>
        <a class='event-session-date' href="{% route training_session, id: session.id %}">
          {{ session.month }} {{ session.day }} at {{ session.starts }} {{ session.time_zone }}
        </a>
      </div>
    {% endfor %}
    {% if training_event.sessions.size > 2 %}
      {% assign third_session = training_event.sessions | slice: 2 | map: 'id' %}
      <a class='event-additional-sessions' href="{% route training_session, id: third_session %}">
        {{ training_event.sessions.size | minus: 2 }} additional sessions
      </a>
    {% endif %}
  </div>
  <a class='event-button' href="{% route training_session, id: training_event.sessions.first.id %}">Select</a>
</div>
