<c8y-modal
  [title]="title"
  [headerClasses]="'dialog-header'"
  (onDismiss)="cancel()"
  (onClose)="save()"
  [disabled]="form.invalid"
  [labels]="{ cancel: 'Cancel', ok: 'Add' }"
>
  <ng-container c8y-modal-title>
    <span [c8yIcon]="'language1'"></span>
  </ng-container>
  <div [formGroup]="form">
    <c8y-form-group>
      <label
        for="label"
        translate
      >
        Translation key
      </label>
      <input
        class="form-control"
        id="key"
        placeholder="{{'e.g. {{ example }}' | translate : { example: 'Home' } }}"
        name="key"
        type="text"
        formControlName="key"
      />
      <c8y-messages>
        <c8y-message
          name="keyAlreadyTaken"
          [text]="alreadyTakenMsg | translate"
        ></c8y-message>
      </c8y-messages>
    </c8y-form-group>

    @for (language of availableLangs; track language.lang) {
      <c8y-form-group>
        <label [for]="language.lang"> {{ language.nativeLanguage }} ({{ language.lang }}) </label>
        <input
          class="form-control"
          type="text"
          [name]="language.lang"
          [id]="language.lang"
          [formControlName]="language.lang"
        />
      </c8y-form-group>
    }
  </div>
</c8y-modal>