@if (isLoading) {
  <div class="loading-spinner">
    <mat-spinner></mat-spinner>
  </div>
}
<h2 mat-dialog-title>Übergaben {{ data.name }}</h2>

<mat-tab-group mat-stretch-tabs="true" mat-align-tabs="start" [dynamicHeight]="true" >
  <mat-tab label="Neue Übergabe"  >
    <mat-dialog-content>
    <form [formGroup]="handoverForm" class="flex flex-col items-stretch justify-stretch">
      <!-- <h6>Neue Übergabe anlegen:</h6> -->
  
      <mat-form-field>
        <mat-label>Mieter</mat-label>
        <input type="text"
               matInput
               formControlName="customer"
               [matAutocomplete]="auto">
        <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
          @for (option of filteredCustomers | async; track option) {
            <mat-option [value]="option.name">{{option.name}}</mat-option>
          }
        </mat-autocomplete>
        <mat-hint>Wähle den Empfänger oder tippe einen neuen Namen ein</mat-hint>
      </mat-form-field>
  
      <div style="margin: 24px 0;">
        Der Schlüssel wurde
        <mat-radio-group formControlName="direction" class="flex flex-col justify-items-start items-start">
          <mat-radio-button  [value]="'out'">Ausgegeben</mat-radio-button>
          <mat-radio-button [value]="'return'">Zurückgegeben</mat-radio-button>
        </mat-radio-group>
      </div>
  
      <mat-form-field>
        <mat-label>Datum der Übergabe</mat-label>
        <input matInput [matDatepicker]="picker" formControlName="timestamp">
        <mat-hint>TT.MM.JJJJ (Beispiel: {{ exampleDate | date:'dd.MM.yyyy'}})</mat-hint>
        <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
        <mat-datepicker #picker></mat-datepicker>
      </mat-form-field>

      <!-- <div style="padding: 8px 0;margin-top: 12px">
        <mat-slide-toggle formControlName="handoverDocument">
          Übergabeprotokoll anlegen
        </mat-slide-toggle>
      </div> -->

    </form>
  </mat-dialog-content>
  <mat-dialog-actions>
    <button matButton mat-dialog-close class="btn-warning">Schließen</button>
    <button matButton="elevated" (click)="save()" class="btn-primary" [disabled]="handoverForm.invalid">
      <mat-icon>save</mat-icon>
      Speichern
    </button>
  </mat-dialog-actions>
  </mat-tab>

  <mat-tab label="Historie">
  <mat-dialog-content class="p-0">
    <div style="height: 300px;" class="pt-3 px-0 pr-0">
      <ag-grid-angular
      style="width: 100%; height: 100%;"
      (gridReady)="onGridReady($event)"
      [gridOptions]="gridOptions!"
      [theme]="myTheme"
    />
    </div>
  </mat-dialog-content>
  <mat-dialog-actions>
    <button matButton mat-dialog-close >Schließen</button>
  </mat-dialog-actions>
  </mat-tab>
</mat-tab-group>