<div class="flex flex-col">
  <p class="isa-text-body-1-regular text-isa-neutral-600" data-what="message">
    {{ message() }}
  </p>
  @if (subMessage()) {
    <div class="flex flex-row gap-1">
      <p
        class="isa-text-body-1-regular text-isa-neutral-600"
        data-what="sub-message"
      >
        {{ subMessage() }}
      </p>
      @if (subMessageValue()) {
        <p
          class="isa-text-body-1-bold text-isa-neutral-900"
          data-what="sub-message-value"
        >
          {{ subMessageValue() }}
        </p>
      }
    </div>
  }
</div>
<div class="flex flex-col gap-8">
  <ui-text-field-container>
    <ui-text-field size="small" class="w-full">
      <input
        #inputRef
        uiInputControl
        class="isa-text-body-2-bold placeholder:isa-text-body-2-bold"
        [placeholder]="inputLabel() ?? ''"
        type="number"
        [formControl]="control"
        (cleared)="control.setValue(null)"
        (blur)="control.updateValueAndValidity()"
        (keydown.enter)="confirm()"
        data-what="input"
        data-which="number"
      />

      <ui-text-field-clear></ui-text-field-clear>
    </ui-text-field>

    @if (inputValidation(); as iv) {
      <ui-text-field-errors>
        @for (validation of iv; track validation.errorKey) {
          @if (control.errors?.[validation.errorKey] && control.touched) {
            <span data-what="error" [attr.data-which]="validation.errorKey">{{
              validation.errorText
            }}</span>
          }
        }
      </ui-text-field-errors>
    }
  </ui-text-field-container>

  <div class="flex flex-row gap-2 w-full">
    <button
      class="grow"
      uiButton
      (click)="closed.emit()"
      color="secondary"
      data-what="button"
      data-which="close"
      size="large"
    >
      {{ closeText() || 'Verlassen' }}
    </button>
    <button
      class="grow"
      uiButton
      (click)="confirm()"
      color="primary"
      data-what="button"
      data-which="save"
      [disabled]="control.invalid"
      size="large"
    >
      {{ confirmText() || 'Speichern' }}
    </button>
  </div>
</div>
