<div class="viewport-modal">
  <div class="modal-header dialog-header">
    <i c8y-icon="c8y-simulator"></i>
    <h4
      title="{{ 'Add simulator' | translate }}"
      id="modal-title"
      translate
      ng-hide="vm.editInstances"
    >
      Add simulator
    </h4>
    <h4
      title="{{ 'Edit number of simulator instances' | translate }}"
      translate
      ng-show="vm.editInstances"
    >
      Edit number of simulator instances
    </h4>
  </div>
  <form
    name="newSimulatorForm"
    ng-submit="!newSimulatorForm.$pending && newSimulatorForm.$valid && vm.ok()"
    novalidate
  >
    <div class="modal-inner-scroll">
      <div
        class="modal-body"
        id="modal-body"
      >
        <div
          class="form-group"
          ng-if="!vm.editInstances"
        >
          <label for="presets">
            <span
              title="{{ 'Select initial instructions' | translate }}"
              translate
            >
              Presets
            </span>
          </label>
          <div class="c8y-select-wrapper">
            <select
              class="form-control"
              aria-label="{{ 'Presets' | translate }}"
              name="presets"
              ng-model="vm.preset"
              ng-options="p as (p.name | translate) for p in vm.presets"
              ng-change="vm.onPresetSelected()"
            ></select>
            <span></span>
          </div>
          <c8y-error-feedback field="newSimulatorForm.presets"></c8y-error-feedback>
        </div>

        <div
          class="form-group"
          ng-if="!vm.editInstances"
        >
          <label for="name">
            <span
              title="{{ 'Descriptive simulator name' | translate }}"
              translate
            >
              Simulator name
            </span>
          </label>
          <input
            class="form-control"
            id="name"
            placeholder="{{ 'e.g. My simulator' | translate }}"
            name="name"
            type="text"
            required
            ng-model="vm.newSimulator.name"
            ng-maxlength="500"
          />
          <c8y-error-feedback field="newSimulatorForm.name"></c8y-error-feedback>
        </div>

        <div class="form-group">
          <label for="numberInstances">
            <span
              title="{{ 'Number of instances of the simulator to create' | translate }}"
              translate
            >
              Number of instances
            </span>
          </label>
          <input
            class="form-control"
            name="instances"
            for="numberInstances"
            type="number"
            step="1"
            min="1"
            max="10"
            ng-model="vm.newSimulator.instances"
          />
          <c8y-error-feedback
            field="newSimulatorForm.instances"
            check-on-dirty="true"
          ></c8y-error-feedback>
        </div>
      </div>
    </div>
    <div class="modal-footer">
      <button
        class="btn btn-default"
        title="{{ 'Cancel' | translate }}"
        type="button"
        ng-click="vm.cancel()"
      >
        {{ 'Cancel' | translate }}
      </button>
      <button
        class="btn btn-primary"
        title="{{ 'Add' | translate }}"
        type="submit"
        ng-disabled="newSimulatorForm.$pending || newSimulatorForm.$invalid"
        data-cy="c8y-simulator-add--create-btn"
      >
        {{ 'Add' | translate }}
      </button>
    </div>
  </form>
</div>
