<form name="addOperationForm" novalidate>
  <div class="modal-header" ng-show="title">
    <h3 id="modal-title">{{ title | translate }}</h3>
  </div>
  <div class="modal-body" id="modal-body">
    <div
      class="form-group col-lg-12"
      ng-class="{ 'has-error': addOperationForm.$dirty && addOperationForm.$invalid }"
    >
      <textarea
        c8y-code-editor="json"
        class="form-control"
        rows="5"
        name="operation"
        ng-model="operation.json"
        aria-label="{{ placeholder(param) | translate }}"
        uib-tooltip="{{ placeholder(param) | translate }}"
        tooltip-popup-delay="500"
        tooltip-append-to-body="true"
        required
      ></textarea>
    </div>
    <div class="input-group">
      <ui-select ng-model="operation.chosen">
        <ui-select-match placeholder="{{ 'Select or search operation' | translate }}">
          <div>
            <span class="list-group-item-heading">
              {{ $select.selected.name }}
              <small ng-show="$select.selected.category" class="text-muted">
                {{ $select.selected.category }}
              </small>
            </span>
            <span class="list-group-item-text">
              <small class="text-muted">{{ $select.selected.text | translate }}</small>
            </span>
          </div>
        </ui-select-match>
        <ui-select-choices repeat="operation in commandTemplates | filter: $select.search">
          <div>
            <span class="list-group-item-heading">
              {{ operation.name }}
              <small ng-show="operation.category" class="text-muted">
                {{ operation.category }}
              </small>
            </span>
            <span class="list-group-item-text">
              <small class="text-muted">{{ operation.text | translate }}</small>
            </span>
          </div>
        </ui-select-choices>
      </ui-select>
      <span class="input-group-btn" style="vertical-align: top">
        <button
          class="btn btn-primary"
          type="button"
          aria-label="{{ 'Use this operation' | translate }}"
          uib-tooltip="{{ 'Use this operation' | translate }}"
          tooltip-popup-delay="500"
          tooltip-append-to-body="true"
          ng-click="chooseOperation(operation.chosen)"
        >
          <i c8y-icon="share"></i>
        </button>
      </span>
    </div>
  </div>
  <div class="modal-footer">
    <button
      class="btn btn-default"
      type="button"
      title="{{ 'Cancel' | translate }}"
      ng-click="dismiss()"
    >
      {{ 'Cancel' | translate }}
    </button>
    <button
      class="btn btn-primary"
      type="submit"
      title="{{ 'Add' | translate }}"
      data-ng-disabled="addOperationForm.$invalid"
      ng-click="close()"
    >
      {{ 'Add' | translate }}
    </button>
  </div>
</form>
