<div
  (click)="selectEvent()"
  class="event d-flex flex-direction-row py-1 px-1 mb-2 border-radius-1 small text-white {{getEventThemeClass()}}"
>

  <div class=" event-bar-container flex-grow-0 flex-shrink-0 d-flex" style="flex-basis: 10px;">
    <div class="event-bar flex-grow-1 flex-shrink-1 my-1 border-radius-1 bg-white" ></div>
  </div>

  <div class="event-info-container flex-grow-1 flex-shrink-1 "  style="flex-basis: 0;"  >
    <div class="event-info ms-1" style="white-space: pre-wrap">
      <div class="app-font-size-sm app-font-weight-normal ">{{event.start | eventDate:'time' }}</div>
      <div class="app-font-size-sm app-font-weight-bold">{{event.eventType.name}}</div>
      <ng-container *ngIf="hasTrainer()">
        <div class="app-font-size-sm app-font-weight-normal " style="max-width: 100%; word-break: break-word">{{formatTrainer()}}</div>
      </ng-container>
    </div>
  </div>
</div>
