<c8y-modal
  [title]="'Add placeholder' | translate"
  [headerClasses]="'dialog-header'"
  [customFooter]="true"
  #modal
>
  <form class="p-24" [formGroup]="form" c8y-modal-body>
    <c8y-form-group>
      <label for="placeholderName" translate>Placeholder name</label>
      <input
        class="form-control"
        id="placeholderName"
        placeholder="{{ 'e.g. myPlaceholder' | translate }}"
        type="text"
        autocomplete="off"
        required
        #placeholderNameInput
        formControlName="placeholderName"
      />
      <c8y-messages>
        <c8y-message
          name="required"
          text="{{ 'Placeholder name is required.' | translate }}"
        ></c8y-message>
        <c8y-message
          name="pattern"
          text="{{
            'Name must be a valid identifier (only letters, digits, underscores, or dollar signs allowed, cannot start with a digit).'
              | translate
          }}"
        ></c8y-message>
      </c8y-messages>
    </c8y-form-group>
  </form>
  <div class="modal-footer" c8y-modal-footer-custom>
    <button class="btn btn-default" (click)="onCancel()">{{ 'Cancel' | translate }}</button>
    <button class="btn btn-primary" (click)="onContinue()" [disabled]="form.invalid">
      {{ 'Continue' | translate }}
    </button>
  </div>
</c8y-modal>