<c8y-modal
  [title]="modalTitle"
  (onClose)="onClose($event)"
  (onDismiss)="onDismiss($event)"
  [labels]="labels"
  [disabled]="form?.invalid"
  [headerClasses]="'dialog-header'"
>
  <ng-container c8y-modal-title>
    <span [c8yIcon]="'cog'"></span>
  </ng-container>
  <form
    class="p-24"
    [formGroup]="form"
  >
    <c8y-form-group>
      <label
        for="buttonLabel"
        translate
      >
        Button label
      </label>
      <input
        class="form-control"
        id="buttonLabel"
        placeholder="{{ 'e.g. Execute operation' | translate }}"
        type="text"
        formControlName="buttonLabel"
      />
      <c8y-messages></c8y-messages>
    </c8y-form-group>

    @if (!showButtonLabelOnly) {
      <div class="form-group">
        <label
          for="operation"
          translate
        >
          Operation
        </label>
        <div class="c8y-select-wrapper">
          <select
            class="form-control"
            id="operation"
            formControlName="operation"
          >
            <optgroup label="{{ 'Predefined' | translate }}">
              @for (op of predefinedOperations; track op.name) {
                <option [ngValue]="op.name">{{ op.name | translate }}</option>
              }
            </optgroup>
            @let pluginTemplates = pluginTemplates$ | async;
            @if (pluginTemplates?.length) {
              <optgroup label="{{ 'Plugin templates' | translate }}">
                @for (op of pluginTemplates; track op.name) {
                  <option [ngValue]="op.name">{{ op.name | translate }}</option>
                }
              </optgroup>
            }
            @if (templates.length) {
              <optgroup label="{{ 'Device templates' | translate }}">
                @for (op of templates; track op.name) {
                  <option [ngValue]="op.name">{{ op.name | translate }}</option>
                }
              </optgroup>
            }
          </select>
        </div>
      </div>
      <div class="form-group">
        <label
          for="command"
          translate
        >
          Command
        </label>
        <textarea
          class="form-control no-resize inner-scroll"
          style="max-height: 300px"
          id="command"
          c8y-textarea-autoresize
          formControlName="command"
          maxlength="900"
        ></textarea>
      </div>
    }
  </form>
</c8y-modal>