<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" class="p-24">
    <c8y-form-group>
      <label
        for="label"
        translate
      >
        Translation key
      </label>
      <input
        class="form-control"
        name="key"
        id="key"
        type="text"
        formControlName="key"
        placeholder="{{'e.g. {{ example }}' | translate : { example: 'Home' } }}"
      />
      <c8y-messages>
        <c8y-message
          name="keyAlreadyTaken"
          [text]="alreadyTakenMsg | translate"
        ></c8y-message>
      </c8y-messages>
    </c8y-form-group>

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