<c8y-ui-title-set title="vm.tenant.company"></c8y-ui-title-set>

<div class="card-header sticky-top separator large-padding">
  <div class="card-title" translate>Subscribed applications</div>
</div>
<div class="card-block p-t-0 large-padding">
  <ul class="c8y-list__group">
    <li
      class="c8y-list__item collapsible"
      ng-class="{ expanded: vm.isOpen(a) }"
      ng-repeat="a in vm.associatedApplications"
    >
      <div class="c8y-list__item__block">
        <div class="c8y-list__item__appicon p-l-0">
          <c8y-app-icon app="::a" class="d-contents"></c8y-app-icon>
        </div>
        <div class="c8y-list__item__body m-t-auto m-b-auto">
          <div class="d-flex">
            <button
              class="btn-clean text-truncate"
              type="button"
              title="{{ a | humanizeAppName }}"
              ng-click="vm.openItem(a)"
              ng-if="vm.hasApplicationStatus(a)"
            >
              {{ a | humanizeAppName }}
            </button>
            <p
              ng-if="!vm.hasApplicationStatus(a)"
              title="{{ a | humanizeAppName }}"
              class="text-truncate"
              data-cy="c8y-subscribed-applications--app-title"
            >
              {{ a | humanizeAppName }}
            </p>
            <button
              class="btn-clean m-l-4"
              type="button"
              aria-label="{{ 'Status' | translate }}: {{::vm.getStringTooltip(a.id) | translate}}"
              uib-tooltip="{{ 'Status' | translate }}: {{::vm.getStringTooltip(a.id) | translate}}"
              tooltip-popup-delay="500"
              tooltip-append-to-body="true"
              tooltip-placement="right"
              ng-if="::vm.getStatusIcon(a.id)"
            >
              <i c8y-icon="{{::vm.getStatusIcon(a.id)}}"></i>
            </button>

            <button
              class="btn btn-dot m-l-auto m-r-8 text-muted"
              type="button"
              aria-label="{{ 'Unsubscribe' | translate }}"
              uib-tooltip="{{ 'Unsubscribe' | translate }}"
              data-cy="c8y-applications--unsubscribe"
              tooltip-popup-delay="500"
              tooltip-append-to-body="true"
              ng-click="vm.dissociate(a)"
            >
              <i c8y-icon="unsubscribe"></i>
            </button>
          </div>
        </div>

        <div class="c8y-list__item__actions">
          <button
            class="collapse-btn"
            type="button"
            title="{{ 'Expand' | translate }}"
            ng-if="vm.hasApplicationStatus(a)"
            ng-click="vm.openItem(a)"
          >
            <i c8y-icon="chevron-down"></i>
          </button>
          <span class="p-r-40" ng-if="!vm.hasApplicationStatus(a)"></span>
        </div>
      </div>
      <div uib-collapse="!vm.isOpen(a)">
        <c8y-app-instances-details
          instances-details="vm.memoizedGetSubscriptionInstances(a)"
          instances-status="vm.instancesStatus"
          class="c8y-list__item__collapse--container d-block"
        ></c8y-app-instances-details>
      </div>
    </li>
  </ul>
</div>
