<!-- TODO: breadcrumbs don't render the current simulator name
<c8y-breadcrumbs-set>
  <c8y-breadcrumbs-item
    label="{{ 'Supported operations' | translate }}"
    icon="c8y-energy"
  ></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 ng-if="vm.simulator">
  <div class="row">
    <div class="col-lg-8 col-md-12">
      <div class="card card--fullpage">
        <div class="card-header separator">
          <h4>{{ 'Supported operations' | translate }}</h4>
        </div>
        <div class="inner-scroll">
          <ul class="c8y-list__group" ng-init="vm.loadOperations()">
            <li
              class="c8y-list__item"
              ng-repeat="op in vm.operations | orderBy:['removable', 'name'] track by $index"
            >
              <div class="c8y-list__item__block">
                <div class="c8y-list__item__radio">
                  <label
                    class="c8y-switch c8y-switch--inline"
                    title="{{ 'Toggle operation' | translate }}"
                  >
                    <input
                      type="checkbox"
                      ng-checked="vm.opActive(op)"
                      ng-click="vm.opToggle(op)"
                    />
                    <span></span>
                  </label>
                </div>
                <div class="c8y-list__item__body">
                  <div class="content-flex-40">
                    <div class="col-6">
                      <div class="text-truncate">
                        {{ op.name | translate }}
                      </div>
                    </div>
                    <div class="col-6 d-flex">
                      <div class="m-l-auto-sm" ng-class="{ 'p-r-40': !op.removable }">
                        <span class="text-label-small m-r-4">
                          {{ 'Fragment' | translate }}
                        </span>
                        <span>
                          {{ op.fragment }}
                        </span>
                      </div>
                      <button
                        ng-if="op.removable"
                        class="btn btn-dot btn-dot--danger m-l-8"
                        ng-class="{ open: popoverIsOpen }"
                        title="{{ 'Delete' | translate }}"
                        type="button"
                        uib-popover-template="'confirmDelete.html'"
                        popover-placement="left"
                        popover-append-to-body="true"
                        popover-is-open="popoverIsOpen"
                        popover-trigger="'focus'"
                      >
                        <i c8y-icon="minus-circle"></i>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <script type="text/ng-template" id="confirmDelete.html">
          <div class="text-pre-normal">
            <h4 class="popover-title m-b-8 p-0">
              <i c8y-icon="exclamation-circle" class="text-danger m-r-4"></i>
              {{ 'Delete custom operation' | translate }}
            </h4>
            <p class="m-b-16" translate>
              Are you sure you want to delete? This operation is irreversible.
            </p>
            <div class="d-flex">
              <button class="btn btn-default btn-sm m-r-4" ng-click="popoverIsOpen = !popoverIsOpen">
                {{ 'Cancel' | translate }}
              </button>
              <button class="btn btn-danger btn-sm" ng-click="vm.removeCustomOperation(op.fragment)">
                {{ 'Delete' | translate }}
              </button>
            </div>
          </div>
        </script>

        <div class="card-footer separator">
          <button
            title="{{ 'Add custom operation' | translate }}"
            type="button"
            class="btn btn-default"
            ng-click="vm.addCustomOperation()"
          >
            <i c8y-icon="plus-circle"></i>
            {{ 'Add custom operation' | translate }}
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
