<div class="mat-body" *ngIf="text">
  {{ text }}
</div>

<form [formGroup]="form">
  <div>
    <mat-form-field appearance="outline" class="input_note">
      <mat-label>Anmerkung</mat-label>
      <input matInput type="text" name="note" formControlName="note">
      <mat-hint>Optionale Bemerkung / Erklärung</mat-hint>
    </mat-form-field>
  </div>

  <mat-form-field appearance="outline" class="first">
    <mat-label>Art der Buchung</mat-label>
    <mat-select name="type" formControlName="type" (selectionChange)="onTypeChange()">
      <mat-option *ngFor="let t of transactionTypes" [value]="t">
        {{ transactionType(t) }}
      </mat-option>
    </mat-select>
    <mat-hint>{{ description }}</mat-hint>
  </mat-form-field>

  <mat-form-field class="input_amount second" appearance="outline">
    <mat-label>Betrag</mat-label>
    <input matInput type="number" inputmode="decimal" min="0.01" max="10000" step="0.01" name="amount" formControlName="amount">
    <span matSuffix>€</span>
    <mat-hint *ngIf="!form.controls.amount.errors">als positiver Betrag, z. B. 12,50</mat-hint>
    <mat-error *ngIf="form.controls.amount.errors?.['max']">Bitte Betrag prüfen, maximal 10.000 €</mat-error>
    <mat-error *ngIf="form.controls.amount.errors?.['min']">Betrag muss größer als 0 € sein</mat-error>
  </mat-form-field>

  <div style="display: flex; justify-content: flex-end; margin-top: 12px;" *ngIf="showTotalSlider">
    <mat-slide-toggle formControlName="total">Betrag gleichmäßig aufteilen</mat-slide-toggle>
  </div>
</form>