<!-- TODO: breadcrumbs don't render the current simulator name

<c8y-breadcrumbs-set>
  <c8y-breadcrumbs-item
    label="{{ 'Instructions' | translate }}"
    icon="installing-updates"
  ></c8y-breadcrumbs-item>
  <c8y-breadcrumbs-item
    path="#simulators/{{ vm.simulator.id }}/instructions"
    label="{{ vm.simulator.name }}"
    icon="c8y-simulator"
  ></c8y-breadcrumbs-item>
  <c8y-breadcrumbs-item
    path="#simulators"
    label="{{ 'Simulators' | translate }}"
    icon="c8y-simulator"
  ></c8y-breadcrumbs-item>
  <c8y-breadcrumbs-item
    label="{{ 'Devices' | translate }}"
    icon="exchange"
  ></c8y-breadcrumbs-item>
</c8y-breadcrumbs-set>
-->

<div class="card content-fullpage split-view--5-7">
  <div
    class="card-block bg-level-1 flex-no-shrink large-padding p-t-24 p-b-24 separator-bottom grid__col--fullspan"
  >
    <div class="content-flex-60">
      <div class="text-center">
        <i class="c8y-icon-duocolor icon-48" c8y-icon="c8y-simulator"></i>
      </div>
      <div class="flex-grow col-10">
        <div ng-controller="SimulatorDetailController as vm" class="d-contents">
          <form name="simulatorInputForm" novalidate class="content-flex-60">
            <div class="col-7 p-t-sm-8">
              <div class="form-group form-group-lg m-b-0">
                <label class="sr-only" for="simulatorName">
                  {{ 'Simulator name' | translate }}
                </label>
                <div class="input-group input-group-lg input-group-editable">
                  <input
                    id="simulatorName"
                    class="form-control"
                    maxlength="500"
                    required
                    type="text"
                    name="name"
                    ng-model="vm.simulator.name"
                    ng-style="{ width: vm.simulator.name.length + 2 + 'ch' }"
                    title="{{ vm.simulator.name }}"
                    placeholder="{{ 'e.g. My simulator' | translate }}"
                  />
                  <span></span>
                  <div class="input-group-btn">
                    <button
                      class="btn btn-primary"
                      title="{{ 'Save' | translate }}"
                      ng-disabled="simulatorInputForm.$invalid"
                      ng-click="vm.changeSimulatorName(vm.simulator.name)"
                    >
                      {{ 'Save' | translate }}
                    </button>
                  </div>
                </div>
                <c8y-error-feedback
                  field="simulatorInputForm.name"
                  check-on-dirty="true"
                ></c8y-error-feedback>
              </div>
            </div>
            <div class="col-5">
              <div class="form-group m-b-0">
                <label
                  for="simulatorInstances"
                  translate
                  class="text-label-small text-nowrap m-r-4 m-b-0"
                >
                  Number of instances
                </label>
                <div class="input-group input-group-editable">
                  <input
                    class="form-control"
                    id="simulatorInstances"
                    type="number"
                    name="instances"
                    required
                    placeholder="{{ 'e.g. 1' | translate }}"
                    step="1"
                    min="1"
                    max="10"
                    ng-model="vm.simulator.instances"
                    title="{{ vm.simulator.instances }}"
                    ng-style="{ width: (vm.simulator.instances.length || 5) + 'ch' }"
                  />
                  <span></span>
                  <div class="input-group-btn">
                    <button
                      class="btn btn-primary"
                      title="Save"
                      ng-disabled="simulatorInputForm.$invalid"
                      ng-click="vm.saveInstances(vm.simulator.instances)"
                    >
                      Save
                    </button>
                  </div>
                </div>
                <c8y-error-feedback
                  field="simulatorInputForm.instances"
                  check-on-dirty="true"
                ></c8y-error-feedback>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>

  <c8y-simulator-instruction-list
    instructions="vm.simulator.commandQueue"
    class="inner-scroll split-view__list"
  ></c8y-simulator-instruction-list>

  <c8y-simulator-instruction-detail
    instruction="vm.selectedInstruction"
    class="inner-scroll split-view__detail"
    ng-class="{ 'split-view__detail--selected': vm.selectedInstruction }"
  ></c8y-simulator-instruction-detail>
</div>
