<div class="flex column fill middle">
  @if (!turnover) {
  <mat-progress-bar mode="indeterminate"></mat-progress-bar>
  }
  @if (turnover) {
  <form [formGroup]="form" (ngSubmit)="turnover.id ? update() : create()" #formDirective="ngForm">
    <mat-card>
      <mat-card-content>
        <div class="flex space-between">
          <p>{{ (turnover.id ? 'turnover.edit' : 'turnover.info') | i18n}}</p>
          @if (turnover.created) {
          <span>{{(turnover.username == username ? 'turnover.created.label' : 'turnover.created.label.username') |
            i18n:(turnover.created | datef:'LLL' ):turnover.username}}</span>
          }
        </div>
        <mat-form-field [floatLabel]="'always'">
          <mat-label>{{'turnover.dueDate' | i18n}}</mat-label>
          <input matInput formControlName="dueDate" [matDatepicker]="picker"
            [placeholder]="(turnover.created || today) | datef:'L'">
          <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
          <mat-datepicker #picker></mat-datepicker>
        </mat-form-field>

        <mat-form-field>
          <mat-label>{{'turnover.customer' | i18n}}</mat-label>
          <input matInput formControlName="customer" type="text" [required]="true">
          <mat-error *ngFor="let error of form.get('customer').errors | keyvalue">
            {{'turnover.customer.error.' + (error.key | errorCode) | i18n:error.value}}
          </mat-error>
        </mat-form-field>

        <mat-form-field>
          <mat-label>{{'turnover.motif' | i18n}}</mat-label>
          <input matInput formControlName="motif" type="text" [required]="true">
          <mat-error *ngFor="let error of form.get('motif').errors | keyvalue">
            {{'turnover.motif.error.' + (error.key | errorCode) | i18n:error.value}}
          </mat-error>
        </mat-form-field>

        <mat-form-field>
          <mat-label>{{'turnover.price' | i18n}}</mat-label>
          <input matInput formControlName="price" type="number" min="0" step="0.01" [required]="true">
          <span matTextSuffix>{{'turnover.price.suffix' | i18n}}</span>
          <mat-error *ngFor="let error of form.get('price').errors | keyvalue">
            {{'turnover.price.error.' + (error.key | errorCode) | i18n:error.value}}
          </mat-error>
        </mat-form-field>

        <div class="form-field margin horizontal">
          <mat-radio-group formControlName="paymentMethod" [required]="true">
            <mat-radio-button value="card">
              <span class="flex middle">
                <mat-icon>credit_card</mat-icon>&nbsp;{{'turnover.paymentMethod.card' | i18n}}
              </span>
            </mat-radio-button>
            <mat-radio-button value="cash">
              <span class="flex middle">
                <mat-icon>payments</mat-icon>&nbsp;{{'turnover.paymentMethod.cash' | i18n}}
              </span></mat-radio-button>
          </mat-radio-group>
          <mat-error *ngFor="let error of form.get('paymentMethod').errors | keyvalue">
            {{'turnover.paymentMethod.error.' + (error.key | errorCode) | i18n:error.value}}
          </mat-error>
        </div>

        <mat-slide-toggle class="margin" [checked]="hasGiftcard" (change)="hasGiftcard=$event.checked">
          {{'turnover.giftcard' | i18n}}
        </mat-slide-toggle>

        <mat-form-field [ngClass]="{'hidden' : !hasGiftcard}">
          <mat-label>{{'turnover.giftcard.number' | i18n}}</mat-label>
          <input matInput formControlName="giftcardNumber" type="text">
          <mat-error *ngFor="let error of form.get('giftcardNumber').errors | keyvalue">
            {{'turnover.giftcard.number.error.' + (error.key | errorCode) | i18n:error.value}}
          </mat-error>
        </mat-form-field>

        <mat-form-field [ngClass]="{'hidden' : !hasGiftcard}">
          <mat-label>{{'turnover.giftcard.price' | i18n}}</mat-label>
          <input matInput formControlName="giftcardPrice" type="number" min="0" step="0.01">
          <span matTextSuffix>{{'turnover.price.suffix' | i18n}}</span>
          <mat-error *ngFor="let error of form.get('giftcardPrice').errors | keyvalue">
            {{'turnover.giftcard.price.error.' + (error.key | errorCode) | i18n:error.value}}
          </mat-error>
        </mat-form-field>

        <mat-form-field>
          <mat-label>{{'turnover.timeInvestment' | i18n}}</mat-label>
          <input matInput formControlName="timeInvestment" type="number" min="0" step="0.1">
          <span matTextSuffix>{{'turnover.timeInvestment.suffix' | i18n}}</span>
          <mat-error *ngFor="let error of form.get('timeInvestment').errors | keyvalue">
            {{'turnover.timeInvestment.error.' + (error.key | errorCode) | i18n:error.value}}
          </mat-error>
        </mat-form-field>

        <mat-form-field>
          <mat-label>{{'turnover.remark' | i18n}}</mat-label>
          <textarea matAutosize matAutosizeMinRows="3" matInput formControlName="remark"></textarea>
          <mat-error *ngFor="let error of form.get('remark').errors | keyvalue">
            {{'turnover.remark.error.' + (error.key | errorCode) | i18n:error.value}}
          </mat-error>
        </mat-form-field>

        <mat-form-field>
          <mat-label>{{'turnover.materialConsumption' | i18n}}</mat-label>
          <textarea matAutosize matAutosizeMinRows="3" matInput formControlName="materialConsumption"></textarea>
          <mat-error *ngFor="let error of form.get('materialConsumption').errors | keyvalue">
            {{'turnover.materialConsumption.error.' + (error.key | errorCode) | i18n:error.value}}
          </mat-error>
        </mat-form-field>

      </mat-card-content>
      <mat-card-actions class="flex column">
        <div class="flex fill">
          @if (!working) {
          <button type="submit" mat-raised-button color="primary" [disabled]="form.invalid">
            {{(turnover.id ? 'turnover.update' : 'turnover.create') | i18n}}
          </button>
          }
          @if (success) {
          <a mat-button color="primary" disabled="true">{{'turnover.success' | i18n}}</a>
          }
          @if (admin && turnover.id) {
          <span class="spacer"></span>
          <a mat-raised-button color="warn" (click)="deleteTurnover()">
            <mat-icon>delete</mat-icon> {{'turnover.delete' | i18n}}
          </a>
          }
        </div>
        @if (turnover.updated && turnover.updated != turnover.created) {
        <div class="flex">
          <span class="margin">{{'turnover.updated.label' | i18n:(turnover.updated | datef:'LLL' )}}</span>
        </div>
        }
      </mat-card-actions>
    </mat-card>
  </form>
  }
</div>