<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-16">
          <i class="p-l-0"></i>
        </div>
        <div class="c8y-list__item__body">
          <div class="row">
            <div class="col-xs-3">
              <label class="m-0">{{ 'Tenant' | translate }}</label>
            </div>
            <div class="col-xs-3">
              <label class="m-0">{{ 'Active' | translate }}</label>
            </div>
            <div class="col-xs-3">
              <label class="m-0">{{ 'Unhealthy' | translate }}</label>
            </div>
            <div class="col-xs-3">
              <label class="m-0">{{ 'Desired' | translate }}</label>
            </div>
          </div>
        </div>
      </div>
    </div>

</div>
<ul class="c8y-list__group">
  <li
    class="c8y-list__item collapsible"
    ng-class="{ expanded: vm.isOpen(subscription) }"
    ng-repeat="subscription in vm.subscriptionsList | orderBy:'tenantName' track by subscription.tenantName"
  >
    <div class="c8y-list__item__block">
      <div class="c8y-list__item__icon p-l-4 p-r-8">
        <button
          class="btn-clean"
          aria-label="{{ 'Status' | translate }}: {{ subscription.status | translate }}"
          uib-tooltip="{{ 'Status' | translate }}: {{ subscription.status | translate }}"
          tooltip-placement="right"
          tooltip-popup-delay="500"
          tooltip-trigger="'mouseenter'"
          type="button"
        >
          <i c8y-icon="{{ vm.getStatusIcon(subscription.status) }}"></i>
        </button>
      </div>
      <div class="c8y-list__item__body">
        <div class="row">
          <div
            class="col-xs-3 text-truncate"
            title="{{ subscription.tenantName }}"
          >
            <span
              class="text-label-small visible-xs-inline"
              translate
            >
              Tenant
            </span>
            {{ subscription.tenantName }}
          </div>
          <div
            class="col-xs-3 text-truncate"
            title="{{ 'Active' | translate }} {{ subscription.active || 0 }}"
          >
            <span
              class="text-label-small visible-xs-inline"
              translate
            >
              Active
            </span>
            {{ subscription.active || 0 }}
          </div>
          <div
            class="col-xs-3 text-truncate"
            title="{{ 'Unhealthy' | translate }} {{ subscription.unhealthy || 0 }}"
          >
            <span
              class="text-label-small visible-xs-inline"
              translate
            >
              Unhealthy
            </span>
            {{ subscription.unhealthy || 0 }}
          </div>
          <div
            class="col-xs-3 text-truncate"
            title="{{ 'Desired' | translate }} {{ subscription.desired || 0 }}"
          >
            <span
              class="text-label-small visible-xs-inline"
              translate
            >
              Desired
            </span>
            {{ subscription.desired || 0 }}
          </div>
        </div>
      </div>
      <div
        class="c8y-list__item__actions"
        ng-if="vm.showDetails(subscription)"
      >
        <button
          class="collapse-btn"
          title="{{ 'Expand' | translate }}"
          type="button"
          ng-click="vm.openItem(subscription)"
        >
          <i c8y-icon="chevron-down"></i>
        </button>
      </div>
    </div>
    <div uib-collapse="!vm.isOpen(subscription)">
      <c8y-app-instances-details
        class="c8y-list__item__collapse--container d-block"
        instances-details="vm.getSubscriptionInstances(subscription)"
      ></c8y-app-instances-details>
    </div>
  </li>
</ul>
