<c8y-ui-empty-state
  [icon]="'c8y-energy'"
  [title]="'No recent operations found.' | translate"
  ng-if="vm.operations.length === 0"
  [horizontal]="true"
></c8y-ui-empty-state>

<div class="c8y-list__group c8y-list--timeline">
  <div
    class="c8y-list--timeline__item"
    ng-class="{ expanded: vm.isOpen(op) }"
    ng-repeat="op in vm.operations | orderBy:'creationTime'"
    ng-click="vm.toggle(op)"
  >
    <small class="c8y-list--timeline__item__date ng-binding">
      {{ op.creationTime | absoluteDate }}
    </small>
    <div class="c8y-list__item">
      <div class="c8y-list__item__block">
        <div class="c8y-list__item__icon">
          <button
            class="btn-clean"
            aria-label="{{ op.status | translate }}"
            uib-tooltip="{{ op.status | translate }}"
            tooltip-popup-delay="500"
            tooltip-trigger="'mouseenter'"
            tooltip-append-to-body="true"
            type="button"
          >
            <i
              ng-class="vm.statusClass(op)"
              c8y-icon="{{ vm.statusIcon(op) }}"
            ></i>
          </button>
        </div>
        <div class="c8y-list__item__body">
          <div class="d-flex text-break-word">
            <div>
              {{ op.status | translate }}
              <br class="visible-xs visible-sm" />
              <small>{{ op.c8y_Command.text || op.description }}</small>
            </div>
            <div
              class="m-l-auto showOnHover"
              ng-click="$event.stopPropagation()"
              ng-if="op.status === 'PENDING'"
            >
              <button
                class="btn btn-dot btn-dot--danger"
                aria-label="{{ 'Cancel operation' | translate }}"
                uib-tooltip="{{ 'Cancel operation' | translate }}"
                tooltip-popup-delay="500"
                tooltip-append-to-body="true"
                tooltip-trigger="'mouseenter'"
                type="button"
                ng-click="vm.cancel(op)"
              >
                <i c8y-icon="times"></i>
              </button>
            </div>
          </div>
        </div>
        <div
          class="c8y-list__item__actions"
          ng-click="$event.stopPropagation()"
        >
          <button
            class="collapse-btn"
            title="{{ 'Expand' | translate }}"
            type="button"
            ng-click="vm.toggle(op)"
          >
            <i c8y-icon="chevron-down"></i>
          </button>
        </div>
      </div>

      <div
        class="c8y-list__item__footer separator-top collapse"
        aria-hidden="true"
        uib-collapse="!vm.isOpen(op)"
        ng-click="$event.stopPropagation()"
      >
        <div
          class="m-l-16 m-r-16"
          ng-if="vm.isOpen(op)"
        >
          <div
            class="legend form-block"
            translate
          >
            Details
          </div>
          <ul class="list-unstyled small">
            <li
              class="p-t-4 p-b-4 d-flex separator-bottom"
              ng-repeat="(key, label) in vm.getStandardKeys(op)"
            >
              <label class="small m-b-0 m-r-8 a-s-start">
                {{ label | translate }}
              </label>
              <span class="m-l-auto">
                {{ op[key] | translate }}
              </span>
            </li>
            <li
              class="p-t-4 p-b-4 d-flex separator-bottom"
              ng-repeat="key in vm.getNonStandardKeys(op)"
            >
              <label class="small m-b-0 m-r-8 a-s-start">
                {{ key | humanize2 }}
              </label>
              <span class="m-l-auto text-code">
                {{ op[key] | json }}
              </span>
            </li>
          </ul>
          <div ng-show="op.c8y_Command">
            <div
              class="legend form-block"
              translate
            >
              Command
            </div>
            <pre class="text-pre-line">
                <code>{{op.c8y_Command.text}}</code>
              </pre>
            <div
              class="legend form-block"
              translate
            >
              Response
            </div>
            <pre class="text-pre-line">
                <code>{{op.c8y_Command.result}}</code>
              </pre>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
