
<div class="row mb-3">
  <div class="col-12">
    <form [formGroup]="formTimeTable">
      <select  class="form-select mt-3" id="trainers" formControlName="idTrainer">
        <option [value]="-1">{{"Minden edző"}}</option>
        <option *ngFor="let trainer of trainers" [value]="trainer.id">{{trainer.name}}</option>
      </select>
      <select  class="form-select mt-3" id="eventTypes" formControlName="idEventType">
        <option [value]="-1">{{"Minden edzés típus"}}</option>
        <option *ngFor="let eventType of eventTypes" [value]="eventType.id">{{eventType.name}}</option>
      </select>
    </form>
  </div>
</div>
<div class="row  text-white gx-2 d-none d-md-flex ">
  <div *ngFor="let dayOfWeek of daysOfWeek;  let i = index" class="col mb-2">
    <div class="border text-center py-1 px-2 text-light"
         [class.bg-primary]="i % 7 < 6"
         [class.bg-dark]="i % 7 == 6"
    >
      <span class="d-none d-lg-inline text-capitalize app-font-size-md app-font-weight-bold ">{{dayOfWeek.name}}</span>
      <span class="d-none d-md-inline d-lg-none text-capitalize">{{dayOfWeek.shortName}}</span>
    </div>
  </div> <!--  text-center name-of-day-of-week bg-primary-->
</div>
<div *ngIf="eventsAvailableResponse" class="row   mb-4 gx-2">
  <ng-container *ngFor="let day of daysToDisplay;  let i = index">
    <div app-month-calendar-day class="col-12 col-md mb-2 d-md-block" [class.d-none]="!day.active" [day]="day"
         (onEvent)="handleEvent($event)"></div>
    <div *ngIf="i > 0 && ( ((i+1) % 7) == 0)" class="w-100"></div>
  </ng-container>
</div>
