<div class="card-header separator sticky-top visible-sm visible-xs">
  <button
    class="btn btn-clean text-primary"
    title="{{ 'Back' | translate }}"
    type="button"
    ng-click="vm.cancel()"
  >
    <i c8y-icon="chevron-left"></i>
    {{ 'Back' | translate }}
  </button>
</div>
<div
  ng-if="vm.editInstruction.type === 'message' || vm.editInstruction.type === 'builtin'"
  class="card-header large-padding separator sticky-top"
>
  <div class="fit-w">
    <ui-select
      ng-model="vm.selectedMessage"
      title="{{ 'Select message' | translate }}…"
      on-select="vm.onSelectedMessage()"
      append-to-body="true"
    >
      <ui-select-match
        placeholder="{{ 'Select a message from the SmartREST templates' | translate }}"
      >
        <span ng-bind="$select.selected.name | translate" data-cy="c8y-simulator-detail--name"></span>
        <span class="text-muted" ng-bind="$select.selected.msgId"></span>
        <small class="text-monospace" ng-bind="$select.selected.api"></small>
        <small class="text-monospace" ng-bind="$select.selected.method"></small>
      </ui-select-match>
      <ui-select-choices repeat="msg in vm.messages | filter: $select.search">
        <span ng-bind="msg.name | translate"></span>
        <span class="text-muted" ng-bind="msg.msgId"></span>
        <br ng-show="msg._template" />
        <small ng-show="msg._template" class="text-monospace" ng-bind="msg.api"></small>
        <small ng-show="msg._template" class="text-monospace" ng-bind="msg.method"></small>
        <br />

        <small title="{{ 'Built-in' | translate }}" ng-hide="msg._template">
          <b translate>Built-in</b>
        </small>
        <small title="{{ 'Template' | translate }}" ng-show="msg._template">
          <b translate>Template</b>
        </small>
        <small class="text-muted" ng-show="msg._template" ng-bind="msg._template.name"></small>
        <small
          class="text-muted"
          ng-show="msg._template"
          ng-bind="msg._template.__externalId"
        ></small>
      </ui-select-choices>
    </ui-select>
  </div>
</div>
<form
  name="valuesForm"
  novalidate
  class="p-16 p-t-16 flex-grow"
  ng-submit="valuesForm.$valid && vm.save()"
  ng-switch="vm.editInstruction.type"
>
  <div class="c8y-empty-state" ng-if="!vm.editInstruction.type">
    <h1 title="Instruction" class="c8y-icon c8y-icon-duocolor" c8y-icon="installing-updates"></h1>
    <div>
      <div class="text-medium">{{ 'No instruction to display.' | translate }}</div>
      <p>{{ 'Add or select an instruction.' | translate }}</p>
    </div>
  </div>

  <div ng-switch-when="sleep">
    <div class="form-group">
      <label translate>Duration in seconds</label>
      <input
        name="seconds"
        class="form-control"
        type="number"
        step="1"
        min="5"
        max="3600"
        placeholder="{{ 'e.g.' | translate }} 25"
        required
        ng-model="vm.editInstruction.seconds"
      />
      <c8y-error-feedback field="valuesForm.seconds">
        <span ng-message="min" ng-bind="'Duration must be larger than 5' | translate"></span>
        <span ng-message="max" ng-bind="'Duration cannot be larger than 3600' | translate"></span>
        <span ng-message="number" ng-bind="'Duration must be a number' | translate"></span>
      </c8y-error-feedback>
    </div>
  </div>

  <div ng-switch-default>
    <div class="form-group" ng-repeat="val in vm.valuesData" ng-if="vm.editInstruction.type">
      <label
        style="z-index: 0"
        ng-bind="(val.path | translate | humanize2) || (val.label | translate)"
      ></label>
      <c8y-smart-rest-value-input
        name="'field' + val.order"
        value="val.inputValue"
        type="val.type"
        render-type="val.renderType"
        validation="val.validation"
        model-options="val.modelOptions"
        placeholder="'Value' | translate"
        data-required="val"
      ></c8y-smart-rest-value-input>
      <c8y-error-feedback field="valuesForm['field' + val.order]"></c8y-error-feedback>
    </div>
  </div>
</form>

<div class="card-footer separator-top sticky-bottom" ng-if="vm.editInstruction.type">
  <button
    type="button"
    title="{{ 'Cancel' | translate }}"
    class="btn btn-default"
    ng-click="vm.cancel()"
  >
    {{ 'Cancel' | translate }}
  </button>
  <button
    type="button"
    title="{{ 'Remove' | translate }}"
    class="btn btn-danger"
    ng-click="vm.remove()"
    ng-if="!vm.editInstruction.isNew"
  >
    {{ 'Remove' | translate }}
  </button>
  <button
    type="button"
    title="{{ 'Save' | translate }}"
    class="btn btn-primary"
    ng-disabled="!vm.canSave(valuesForm)"
    ng-click="vm.save()"
  >
    {{ 'Save' | translate }}
  </button>
</div>
