<!--  <app-fit-weekday-selector  [days]="(availableEvents | async)?.days" ></app-fit-weekday-selector>-->
<ng-container *ngIf="registrations | async">
  <ng-container *ngIf="!(registrations | async)?.length">
    Jelenleg nincsen aktív foglalása
  </ng-container>
  <ng-container *ngIf="(registrations | async)?.length">
    <div class="row  text-white mb-2 mx-1 align-middle"
         *ngFor="let registration of (registrations | async); let i = index; "
         (click)="showRegistration(registration)"
         [class.mt-2]="i == 0"
    >
      <div class="col-12 col-md-9 bg-dark d-lg-flex  align-items-lg-center py-2 ">
        <fa-icon [classes]="['text-success','me-2']" *ngIf="registrationService.isActive(registration)"
                 [icon]="faCalendarCheck"></fa-icon>
        <fa-icon [classes]="['text-warning','me-2']" *ngIf="registrationService.isCanceled(registration)"
                 [icon]="faCalendarMinus"></fa-icon>
        <fa-icon [classes]="['text-danger','me-2']" *ngIf="registrationService.isDeleted(registration)"
                 [icon]="faCalendarTimes"></fa-icon>
        {{ registration.event.start  | eventDate: 'datetime' }}  - {{registration.event.eventType.name}}
        - {{registration.event.trainer.name}}
      </div>
      <div class="col-3 bg-dark  py-2 d-none d-md-block text-end">
        <a class="btn btn-primary float-right">Részletek</a>
      </div>
    </div>
  </ng-container>
</ng-container>

