<div class="modal-header separator">
  <h3 id="modal-title">
    <span translate>Add custom operation</span>
  </h3>
</div>

<div class="modal-body" id="modal-body">
  <form name="newOpForm" novalidate>
    <div class="form-group">
      <label for="name">
        <span translate>Custom operation type</span>
        <button
          class="btn-help btn-help--sm"
          type="button"
          aria-label="{{ 'Help' | translate }}"
          uib-popover="{{
            'Insert the custom operation type to be supported by your simulator.' | translate
          }}"
          popover-placement="right"
          popover-trigger="'focus'"
        ></button>
      </label>
      <input
        id="op"
        name="op"
        type="text"
        class="form-control"
        ng-model="vm.op"
        placeholder="{{ 'e.g. myCustomOperation' | translate }}"
        required
      />
      <c8y-error-feedback field="newOpForm.op"></c8y-error-feedback>
    </div>
  </form>
</div>

<div class="modal-footer">
  <button
    class="btn btn-default"
    type="button"
    title="{{ 'Cancel' | translate }}"
    ng-click="vm.dismiss()"
  >
    {{ 'Cancel' | translate }}
  </button>
  <button
    class="btn btn-primary"
    type="button"
    title="{{ 'Add' | translate }}"
    ng-click="vm.close({$value: vm.op})"
    ng-disabled="newOpForm.$invalid"
  >
    {{ 'Add' | translate }}
  </button>
</div>
