<div class="container">
  <ng-container *ngIf="registration  ">
      <h1>Foglalás</h1>
      <div class="row">
        <div class="col-lg-3 col-sm-12 app-font-weight-bold"><span class="title">Edzés típusa</span></div>
        <div class="col-lg-9 col-sm-12"><span>{{registration.event.eventType.name}}</span></div>
      </div>
      <div class="row" *ngIf="registration.event.trainer">
        <div class="col-lg-3 col-sm-12 app-font-weight-bold"><span class="title">Edző</span></div>
        <div class="col-lg-9 col-sm-12"><span>{{registration.event?.trainer?.name}}</span></div>
      </div>
      <div class="row">
        <div class="col-lg-3 col-sm-12 app-font-weight-bold"><span class="title">Edzés kezdési időpontja</span></div>
        <div class="col-lg-9 col-sm-12"><span>{{registration.event.start  | eventDate:'datetime'}}</span></div>
      </div>
      <div class="row">
        <div class="col-lg-3 col-sm-12 app-font-weight-bold"><span class="title">Edzés vége</span></div>
        <div class="col-lg-9 col-sm-12"><span>{{registration.event.end  | eventDate:'datetime'}}</span></div>
      </div>
      <div class="row">
        <div class="col-lg-3 col-sm-12 app-font-weight-bold"><span class="title">Férőhelyek száma</span></div>
        <div class="col-lg-9 col-sm-12"><span>{{registration.event.seat_count }}</span></div>
      </div>
      <div class="row">
        <div class="col-lg-3 col-sm-12 app-font-weight-bold"><span class="title">Terem</span></div>
        <div class="col-lg-9 col-sm-12"><span>{{registration.event?.room?.name }}</span></div>
      </div>
    <div class="row">
      <div class="col-lg-3 col-sm-12 app-font-weight-bold"><span class="title">Regisztráció időpontja</span></div>
      <div class="col-lg-9 col-sm-12"><span>{{registration.created_at | eventDate:'datetime' }}</span></div>
    </div>
    <div class="row" *ngIf="registrationService.isCanceled(registration)">
      <div class="col-lg-3 col-sm-12 app-font-weight-bold"><span class="title">Regisztráció lemondásának időpontja</span></div>
      <div class="col-lg-9 col-sm-12"><span>{{registration.canceled_at | eventDate:'datetime' }}</span></div>
    </div>
    <div class="row" *ngIf="registrationService.isDeleted(registration)">
      <div class="col-lg-3 col-sm-12 app-font-weight-bold"><span class="title">Regisztráció törlésének időpontja</span></div>
      <div class="col-lg-9 col-sm-12"><span>{{registration.deleted_at | eventDate:'datetime' }}</span></div>
    </div>
    <div class="row">
      <div class="col-lg-3 col-sm-12 app-font-weight-bold"><span class="title">Státusz</span></div>
      <div class="col-lg-9 col-sm-12">
        <span *ngIf="registrationService.isCanceled(registration)">{{ "Lemondva" }}</span>
        <span *ngIf="registrationService.isDeleted(registration)">{{ "Törölve" }}</span>
        <span *ngIf="registrationService.isActive(registration)">{{ "Aktív" }}</span>
      </div>
    </div>
      <div class="row">
        <div class="col-lg-9  col-sm-12 pt-2">
          <a *ngIf="mayCancel(registration)" class="btn btn-primary d-lg-none w-100" (click)="cancel(registration)">Lemondás</a>
          <a *ngIf="mayCancel(registration)" class="btn btn-primary d-none d-lg-inline-block" (click)="cancel(registration)">Lemondás</a>
          <a class="btn btn-dark d-lg-none w-100 mt-2" (click)="goBack( )">Vissza</a>
          <a class="btn btn-dark d-none d-lg-inline-block "
             [class.ms-2]="registrationService.isActive(registration)"
             (click)="goBack( )">Vissza</a>
        </div>
      </div>

  </ng-container>
</div>

