<c8y-modal
  [title]="duplicateBranding ? 'Duplicate Branding' : 'Create Branding'"
  [headerClasses]="'dialog-header'"
  (onDismiss)="cancel()"
  (onClose)="save()"
  [disabled]="form.invalid"
  [labels]="{ cancel: 'Cancel', ok: 'Save' }"
>
  <ng-container c8y-modal-title>
    <span [c8yIcon]="'palette'"></span>
  </ng-container>
  <div [formGroup]="form">
    <c8y-form-group>
      <label
        for="brandingName"
        translate
      >
        Branding name
      </label>
      <input
        class="form-control"
        id="brandingName"
        placeholder="{{'e.g. {{ example }}' | translate : { example: 'main-branding' } }}"
        name="brandingName"
        type="text"
        formControlName="brandingName"
      />
      <c8y-messages [helpMessage]="'Upper case letters not allowed' | translate">
        @for (message of messages; track message.name) {
          <c8y-message
            [name]="message.name"
            [text]="message.text | translate"
          ></c8y-message>
        }
      </c8y-messages>
    </c8y-form-group>
  </div>
</c8y-modal>