<div class="previous-events">
  <div class="dashboard-title">WATCH PREVIOUS EVENTS</div>
  <div class="previous-events-widget">
    <div class="row">
      {% assign index = 0 %}
  
      {% for course in enrolled_courses %}
        {% assign is_event_course = false %}
        {% for cat in course.categories %}
          {% assign cat_name = cat.name | downcase %}
          {% if cat_name contains "webinars" or cat_name contains "events" %}
            {% assign is_event_course = true %}
          {% endif %}
        {% endfor %}
        {% if course.properties.previous_event_display_on_dashboard and index < 2 and is_event_course %}
          <div class="col-xs-12 col-sm-6 previous-event" data-date="{{course.properties.course_publish_date}}">
            {% include "cards_previous_event" with course %}
          </div>
          {% assign index = index | plus: 1 %}
        {% endif %}
      {% endfor %}
    </div>
  </div>
</div>

<script>
  var eventIndexes = document.querySelectorAll(".previous-event:not([data-date=''])");
  var eventIndexesArray = Array.from(eventIndexes);
</script>

<style>
  .previous-event-card .np-card-content-title {
    color: #0077B8;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-top:0;
  }
    
  .previous-event-card .np-button {
    background-color: #0077B8;
    color: #FFF;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
  }

  .previous-event-card .np-card-container:hover .np-card-content-title {
    color: #185A7D;
  }

  .previous-event-card .np-card-container:hover .np-button {
    background-color: #185A7D;;
  }

  .previous-event-card .course-image-container {
    width: auto;
    overflow: hidden;
  }

  .previous-event-card .np-card-container:hover .np-card-image {
    scale: 1.25;
    transition: .5s ease all;
  }
</style>