<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>
          <mat-label>{{'turnover.customer' | i18n}}</mat-label>
          <input matInput formControlName="customer" type="text" [required]="true">
          <mat-error *ngIf="hasError('customer')">
            {{'turnover.customer.error' | i18n}}
          </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 *ngIf="hasError('motif')">
            {{'turnover.motif.error' | i18n}}
          </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 *ngIf="hasError('price')">
            {{'turnover.price.error' | i18n}}
          </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 *ngIf="hasError('timeInvestment')">
            {{'turnover.timeInvestment.error' | i18n}}
          </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 *ngIf="hasError('remark')">
            {{'turnover.remark.error' | i18n}}
          </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 *ngIf="hasError('materialConsumption')">
            {{'turnover.materialConsumption.error' | i18n}}
          </mat-error>
        </mat-form-field>

      </mat-card-content>
      <mat-card-actions>
        @if (!working) {
        <button type="submit" mat-raised-button color="primary" [disabled]="form.invalid">
          {{(turnover.id ? 'turnover.update' : 'turnover.create') | i18n}}
        </button>
        }
        @if (turnover.updated && turnover.updated != turnover.created) {
        <span class="margin">{{'turnover.updated.label' | i18n:(turnover.updated | datef:'LLL' )}}</span>
        }
        @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>
        }
      </mat-card-actions>
    </mat-card>
  </form>
  }
</div>