<c8y-breadcrumbs-set>
  <c8y-breadcrumbs-item
    path="#tenants"
    label="{{ 'Subtenants' | translate }}"
    icon="c8y-sub-tenants"
  ></c8y-breadcrumbs-item>
  <c8y-breadcrumbs-item
    label="{{ 'Tenants' | translate }}"
    icon="c8y-sub-tenants"
  ></c8y-breadcrumbs-item>
</c8y-breadcrumbs-set>

<div class="card d-grid content-fullpage grid__col--6-6--md">
  <c8y-subscribed-applications
    dissociate="dissociate"
    tenant="tenant"
    class="inner-scroll bg-level-0"
    associated-applications="associatedApplications"
  ></c8y-subscribed-applications>

  <div class="inner-scroll bg-level-1">
    <div class="card-header sticky-top separator large-padding">
      <div class="card-title">
        {{ 'Available applications' | translate }}
      </div>
      <button
        class="btn-help btn-help--sm"
        type="button"
        aria-label="{{ 'Help' | translate }}"
        uib-popover-template="popoverTemplateUrl"
        popover-placement="bottom"
        popover-trigger="'focus'"
      ></button>
    </div>
    <div
      class="separator-bottom bg-inherit p-l-16 p-r-16 p-t-8 p-b-8 sticky-top has-sticky-card-header"
    >
      <div class="d-flex">
        <div
          title="{{ 'Filter tenants' | translate }}"
          class="input-group input-group-search m-r-8"
        >
          <input
            type="search"
            class="form-control"
            ng-model="filter.text.$"
            placeholder="{{ 'Filter…' | translate }}"
          />
          <span class="input-group-addon">
            <i c8y-icon="search" ng-show="filter.text.$.length === 0 || !filter.text.$"></i>
            <i
              c8y-icon="times"
              class="text-muted"
              ng-show="filter.text.$.length > 0"
              ng-click="filter.text.$ = ''"
            ></i>
          </span>
        </div>
        <div class="flex-no-shrink d-flex">
          <label for="owner" class="control-label m-b-0 m-r-4 a-s-center">
            {{ 'Owner' | translate }}
          </label>
          <div class="c8y-select-wrapper">
            <select
              ng-options="owner.value as owner.label for owner in owners | orderBy:'label'"
              ng-model="filter.owner"
              id="owner"
              class="form-control"
            ></select>
          </div>
        </div>
      </div>
    </div>
    <div class="card-block p-t-0 large-padding bg-inherit">
      <ul class="c8y-list__group">
        <li
          class="c8y-list__item collapsible bg-inherit"
          ng-class="{ expanded: isOpen(a) }"
          ng-repeat="a in applications |filter:filterOwner|filter:filterText"
        >
          <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.humanizedAppName }}"
                  ng-click="openItem(a)"
                >
                  {{ a.humanizedAppName }}
                </button>

                <button
                  class="btn-dot m-l-auto m-r-8"
                  type="button"
                  ng-click="associate(a)"
                  uib-tooltip="{{ 'Subscribe' | translate }}"
                  aria-label="{{ 'Subscribe' | translate }}"
                  data-cy="c8y-applications--subscribe"
                  tooltip-popup-delay="500"
                  tooltip-append-to-body="true"
                >
                  <i c8y-icon="subscription"></i>
                </button>
              </div>
            </div>
            <div class="c8y-list__item__actions">
              <button
                class="collapse-btn"
                type="button"
                title="{{ 'Expand' | translate }}"
                ng-click="openItem(a)"
              >
                <i c8y-icon="chevron-down"></i>
              </button>
            </div>
          </div>
          <div uib-collapse="!isOpen(a)">
            <div class="c8y-list__item__collapse--container">
              <div class="d-flex">
                <p class="m-r-8">
                  <span class="text-label-small m-r-4">{{ 'Availability' | translate }}</span>
                  {{ a.availability }}
                </p>
                <p class="m-r-8">
                  <span class="text-label-small m-r-4">{{ 'Type' | translate }}</span>
                  {{ a.type }}
                </p>
                <p class="m-r-8">
                  <span class="text-label-small m-r-4">{{ 'Owner' | translate }}</span>
                  {{ a.owner.tenant.id }}
                </p>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>
