<div class="sticky-top has-sticky-card-header hidden-xs bg-level-0">
  <div class="c8y-list__item">
    <div class="c8y-list__item__block">
      <div class="c8y-list__item__icon p-l-0">
        <i class="p-l-24"></i>
      </div>
      <div class="c8y-list__item__body">
        <div class="content-flex-20">
          <div class="col-4">
            <p class="text-medium">{{ 'Active' | translate }}</p>
          </div>
          <div class="col-4">
            <p class="text-medium">{{ 'Unhealthy' | translate }}</p>
          </div>
          <div class="col-4">
            <p class="text-medium">{{ 'Desired' | translate }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<ul class="c8y-list__group">
  <li class="c8y-list__item collapsible" ng-class="{ expanded: vm.isOpen }">
    <div class="c8y-list__item__block">
      <div class="c8y-list__item__icon p-l-0">
        <button
          class="btn-clean"
          type="button"
          aria-label="{{ 'Status' | translate }}: {{ vm.status | translate }}"
          uib-tooltip="{{ 'Status' | translate }}: {{ vm.status | translate }}"
          tooltip-placement="right"
          tooltip-popup-delay="500"
          tooltip-append-to-body="true"
          tooltip-trigger="'mouseenter'"
        >
          <i c8y-icon="{{ vm.getStatusIcon(vm.status) }}"></i>
        </button>
      </div>
      <div class="c8y-list__item__body">
        <div class="content-flex-20">
          <div class="col-4 text-truncate">
            <span class="text-label-small visible-xs-inline" translate>Active</span>
            {{ vm.instancesStatus.active || 0 }}
          </div>
          <div class="col-4 text-truncate">
            <span class="text-label-small visible-xs-inline" translate>Unhealthy</span>
            {{ vm.instancesStatus.unhealthy || 0 }}
          </div>
          <div class="col-4 text-truncate">
            <span class="text-label-small visible-xs-inline" translate>Desired</span>
            {{ vm.instancesStatus.desired || 0 }}
          </div>
        </div>
      </div>
      <div class="c8y-list__item__actions" ng-if="vm.showDetails()">
        <button
          class="collapse-btn"
          type="button"
          title="{{ 'Expand' | translate }}"
          ng-click="vm.openItem()"
        >
          <i c8y-icon="chevron-down"></i>
        </button>
      </div>
    </div>
    <div uib-collapse="!vm.isOpen">
      <c8y-app-instances-details
        instances-details="vm.statusFragment.instances"
        class="c8y-list__item__collapse--container d-block"
      ></c8y-app-instances-details>
    </div>
  </li>
</ul>
