<div class="viewport-modal">
  <div class="modal-header dialog-header">
    <i [c8yIcon]="'c8y-modules'"></i>
    <h4 id="modal-title" translate>Custom applications</h4>
  </div>
  <div class="inner-scroll" id="modal-body">
    <div class="p-16 text-center separator-bottom sticky-top bg-component">
      <p class="text-medium" translate>
        Select the applications to which the plugin will be installed.
      </p>
    </div>
    <c8y-list-group *ngIf="apps.length; else emptyList">
      <c8y-li *ngFor="let app of apps">
        <c8y-li-checkbox (onSelect)="updateSelected($event, app)"> </c8y-li-checkbox>
        <c8y-li-icon class="p-l-0 icon-32">
          <c8y-app-icon
            [app]="app"
            [contextPath]="app.contextPath"
            [name]="app.name"
            class="list-group-icon"
          ></c8y-app-icon>
        </c8y-li-icon>
        <div class="d-flex">
          <div class="p-r-8">
            <p [innerText]="app | humanizeAppName | async" class="text-medium"></p>
            <p class="small text-muted">{{ app.description }}</p>
          </div>
          <span [ngClass]="app | appState: 'class'" class="label m-l-auto a-s-start">{{
            app | appState: 'label' | translate
          }}</span>
        </div>
      </c8y-li>
    </c8y-list-group>
  </div>
  <div class="modal-footer">
    <button
      (click)="cancel()"
      class="btn btn-default"
      title="{{ 'Cancel' | translate }}"
      type="button"
    >
      {{ 'Cancel' | translate }}
    </button>
    <button
      class="btn btn-primary"
      [disabled]="appsToInstall.length === 0"
      title="{{ 'Install' | translate }}"
      (click)="install()"
    >
      {{ 'Install' | translate }}
    </button>
  </div>
</div>
<ng-template #emptyList>
  <c8y-ui-empty-state
    [icon]="'c8y-modules'"
    [title]="'No custom applications available.' | translate"
    [subtitle]="'No custom applications available.' | translate"
    [horizontal]="true"
  >
  </c8y-ui-empty-state>
</ng-template>