<section class="cd-horizontal-timeline" [ngClass]="{'loaded': loaded}">
  <div class="timeline">
    <div class="events-wrapper">
      <div class="events" #eventsWrapper [style.width.px]="eventsWrapperWidth">
        <ol>
          <li *ngFor="let item of timelineElements; let index = index">
            <a #timelineEvents [routerLink]=""
              [ngClass]="{'selected': item.selected, 'older-event': index < selectedIndex}"
              (click)="onEventClick($event, item)">{{item.date | date:dateFormatTop}}</a>
            <span></span>
          </li>
        </ol>
        <span class="filling-line" aria-hidden="true" #fillingLine></span>
      </div>
    </div>

    <ul class="cd-timeline-navigation">
      <li>
        <a [routerLink]="" (click)="onScrollClick($event, false)" class="prev"
          [ngClass]="{'inactive':prevLinkInactive}">Prev</a>
      </li>
      <li>
        <a [routerLink]="" (click)="onScrollClick($event, true)" class="next"
          [ngClass]="{'inactive':nextLinkInactive}">Next</a>
      </li>
    </ul>
  </div>

  <div class="events-content" *ngIf="showContent">
    <ol>
      <li *ngFor="let item of timelineElements; let index = index"
        [@contentState]="item.selected ? 'active' : (index < selectedIndex ? 'left' : 'right')">
        <h2 class="text-bold-500">{{item.title}}</h2>
        <h3 class="text-muted mb-1">
          <em>{{item.date | date:longDate}}</em>
        </h3>
        <p class="lead">{{item.content}}</p>
      </li>
    </ol>
  </div>
</section>
