<div class="container">
  <div *ngIf="event">
    <div class="row">
      <div class="col-lg-3 col-sm-12"><span class="title">Edzés típusa</span></div>
      <div class="col-lg-9 col-sm-12"><span>{{event.eventType.name}}</span></div>
    </div>
    <div class="row" *ngIf="event.trainer">
      <div class="col-lg-3 col-sm-12"><span class="title">Edző</span></div>
      <div class="col-lg-9 col-sm-12"><span>{{event.trainer.name}}</span></div>
    </div>
    <div class="row">
      <div class="col-lg-3 col-sm-12"><span class="title">Edzés kezdési időpontja</span></div>
      <div class="col-lg-9 col-sm-12"><span>{{event.start | date:'yyyy.MM.dd HH:mm'}}</span></div>
    </div>
    <div class="row">
      <div class="col-lg-3 col-sm-12"><span class="title">Edzés vége</span></div>
      <div class="col-lg-9 col-sm-12"><span>{{event.end | date:'yyyy.MM.dd HH:mm'}}</span></div>
    </div>
    <div class="row">
      <div class="col-lg-3 col-sm-12"><span class="title">Férőhelyek száma</span></div>
      <div class="col-lg-9 col-sm-12"><span>{{event.seat_count }}</span></div>
    </div>
    <div class="row">
      <div class="col-lg-3 col-sm-12"><span class="title">Szabad helyek száma</span></div>
      <div class="col-lg-9 col-sm-12"><span>{{event.seat_count - event.reservationCount }}</span></div>
    </div>
    <div class="row">
      <div class="col-lg-9  col-sm-12 pt-2">
        <a  *ngIf="mayRegister(event)" class="btn btn-primary " (click)="register(event)" >Foglalás</a>
<!--        <a  *ngIf="mayCancel(event)" class="btn btn-primary" (click)="cancel(event)" >Lemondás</a>-->
<!--        <a  *ngIf="!mayCancel(event) && noFreeSeat(event)" class="btn btn-info btn-di" disabled  >Már nincsen szabad hely</a>-->
      </div>
      <div class="col-lg-3 text-lg-right col-sm-12 pt-2">
        <a  class="btn btn-primary" (click)="closeEvent(event)" >Vissza</a>
      </div>

    </div>
  </div>
  <div *ngIf="!event">
    <div>
      <form [formGroup]="eventTypeForm">
        <app-fit-event-types formControlName="eventType"></app-fit-event-types>
      </form>
    </div>
    <ng-container *ngFor="let eventDay of eventDays">
      <div class="row">
        <div class="col-12"><h1>{{eventDay.date | date }}</h1></div>
      </div>
      <ng-container *ngFor="let eventHour of eventDay.hours">
        <div class="row">
          <div class="col-12 col-sm-12">
            <h2>{{eventHour.hour | date:'HH:mm'}}</h2>
          </div>
        </div>
        <div class="event-items   ">
          <ng-container *ngFor="let event of eventHour.events">
            <div class="event-item   ">
              <div class="row ">
                <div class="col-lg-3 col-sm-12 ">
              <span class="pl-2">
                {{event.start | date:'HH:mm' }} - {{event.end | date:'HH:mm' }}
              </span>
                </div>
                <div class="col-lg-3 col-sm-12">
              <span class="pl-2">
              {{event.eventType.name }} ( {{event.reservationCount}}/{{event.seatCount}}
              </span>
                </div>
                <div class="col-lg-3 col-sm-12">
              <span class="pl-2">
                {{event.trainer.name}}
              </span>
                </div>
                <div class="col-lg-3 col-sm-12 text-sm-left text-lg-right">
                  <a  (click)="open(event)" class="btn btn-primary pull-left">
                    <fa-icon [icon]="['fas', 'user-plus']"></fa-icon>
                    <span class="pl-2">Részletek</span></a>
                </div>
              </div>
            </div>
          </ng-container>
        </div>
      </ng-container>
    </ng-container>
  </div>

</div>
