<div class="bg-level-1 flex-grow">
  <ul
    class="c8y-nav-stacked"
    ui-sortable="vm.uiSortableOptions"
    ng-model="vm.instructions"
  >
    <li
      class="c8y-stacked-item"
      ng-class="{ active: vm.isInstructionSelected(instruction) }"
      ng-style="vm.checkClickable(instruction)"
      ng-repeat="instruction in vm.instructions"
    >
      <i
        class="text-muted showOnHover handle"
        c8y-icon="reorder"
        title="{{ 'Drag to reorder' | translate }}"
        ng-show="vm.canDrag(instruction)"
      ></i>
      <button
        class="btn-clean d-flex fit-w text-truncate"
        type="button"
        ng-click="vm.select(instruction)"
      >
        <i
          class="icon-20 m-r-4"
          c8y-icon="{{ vm.icons[instruction.type] }}"
        ></i>
        <span
          class="text-truncate"
          title="{{ vm.title(instruction) | translate }}"
        >
          <span ng-bind="vm.title(instruction) | translate"></span>

          <span
            class="text-muted"
            ng-show="instruction.type === 'message'"
          >
            {{ instruction.templateId }} / {{ instruction.messageId }}
          </span>
          <span
            class="text-muted"
            ng-show="instruction.type === 'builtin'"
          >
            {{ instruction.messageId }}
          </span>
          <span
            class="text-muted"
            ng-show="instruction.type === 'sleep'"
          >
            <em translate>{{ instruction.seconds }} seconds</em>
          </span>
        </span>
      </button>

      <button
        class="m-l-auto btn btn-icon p-l-8 p-r-8 showOnHover"
        aria-label="{{ 'Remove' | translate }}"
        uib-tooltip="{{ 'Remove' | translate }}"
        tooltip-popup-delay="500"
        tooltip-trigger="'mouseenter'"
        tooltip-placement="left"
        type="button"
        ng-click="vm.remove(instruction)"
      >
        <i
          class="text-danger"
          c8y-icon="minus-circle"
        ></i>
      </button>
    </li>

    <li class="p-24">
      <c8y-ui-empty-state
        [icon]="'installing-updates'"
        [title]="'No instructions.' | translate"
        [subtitle]="'Click below to add the first one.' | translate"
        ng-show="vm.instructions.length === 0"
      >
        <small
          c8y-guide-docs
          translate
        >
          Find out more in the
          <a
            target="_blank"
            c8y-guide-href="/docs/device-management-application/working-with-simulators"
            rel="noopener noreferrer"
          >
            user documentation
          </a>
          .
        </small>
      </c8y-ui-empty-state>
    </li>
  </ul>
</div>
<div class="card-footer large-padding separator grid__col--fullspan sticky-bottom">
  <c8y-instruction-add on-add="vm.add(instruction)"></c8y-instruction-add>
</div>
