<div class="viewport-modal">
  <div class="modal-header dialog-header">
    <i [c8yIcon]="'c8y-modules'"></i>
    <div class="modal-title h4" id="modal-title" translate>Custom applications</div>
  </div>
  <div class="inner-scroll" id="modal-body">
    <div class="p-16 text-center separator-bottom sticky-top bg-component">
      <p class="text-medium">
        {{ textConfig.header | translate }}
      </p>
      <c8y-filter (onSearch)="filterTerm$.next($event)"></c8y-filter>
    </div>
    <c8y-list-group *ngIf="apps.length; else emptyList">
      <c8y-li
        [ngClass]="{ disabled: updateType === 'install' && appsDisabled.has(app.id) }"
        *ngFor="let app of filteredApps$ | async"
        data-cy="apps-to-update-remotes-select--applications-list"
      >
        <c8y-li-checkbox (onSelect)="setSelectedApps($event, app)" data-cy="apps-to-update-remotes-select--app-checkbox"></c8y-li-checkbox>
        <c8y-li-icon class="p-l-0 icon-32">
          <c8y-app-icon
            class="list-group-icon"
            [app]="app"
            [contextPath]="app.contextPath"
            [name]="app.name"
          ></c8y-app-icon>
        </c8y-li-icon>
        <div class="d-flex">
          <div class="p-r-8">
            <p class="text-medium" [innerText]="app | humanizeAppName | async"></p>
            <p class="small text-muted">{{ app.description }}</p>
          </div>
          <span class="label m-l-auto a-s-start" [ngClass]="app | appState: 'class'">
            {{ app | appState: 'label' | translate }}
          </span>
        </div>
      </c8y-li>
    </c8y-list-group>
  </div>
  <div class="modal-footer">
    <button
      class="btn btn-default"
      title="{{ 'Cancel' | translate }}"
      type="button"
      (click)="cancel()"
    >
      {{ 'Cancel' | translate }}
    </button>
    <button
      class="btn btn-primary"
      title="{{ textConfig.applyButton | translate }}"
      [disabled]="appsToUpdateRemotes.length === 0"
      (click)="apply()"
    >
      {{ textConfig.applyButton | translate }}
    </button>
  </div>
</div>
<ng-template #emptyList>
  <c8y-ui-empty-state
    [icon]="'c8y-modules'"
    [title]="'No custom applications available.' | translate"
    *ngIf="updateType !== 'install'"
    [horizontal]="true"
  ></c8y-ui-empty-state>
  <ng-container *ngIf="updateType === 'install'">
    <c8y-ui-empty-state
      [icon]="'c8y-modules'"
      [title]="'No custom applications available.' | translate"
      [subtitle]="'Create a custom application by duplicating an existing one.' | translate"
      [horizontal]="true"
    >
      <button
        class="btn btn-sm btn-default m-t-8"
        title="{{ 'Duplicate' | translate }}"
        (click)="duplicateApp()"
      >
        {{ 'Duplicate' | translate }}
      </button>
    </c8y-ui-empty-state>
  </ng-container>
</ng-template>