<div class="viewport-modal">
  <div class="modal-header dialog-header">
    <i
      c8yIcon="share"
      aria-hidden="true"
    ></i>
    <div
      class="modal-title h4"
      id="modal-title"
    >
      {{ 'Data sharing' | translate }}
    </div>
  </div>

  <div
    class="inner-scroll"
    id="modal-body"
  >
    <div class="p-16 separator-bottom sticky-top bg-component">
      @let description =
        'Select applications whose dashboards should also be visible in "{{name}}".'
          | translate: { name: appName };
      <p class="text-muted m-b-8">{{ description }}</p>
      <c8y-filter (onSearch)="filterTerm.set($event)"></c8y-filter>
    </div>

    @if (filteredApps().length) {
      <c8y-list-group>
        @for (app of filteredApps(); track app.id) {
          <c8y-li>
            <c8y-li-checkbox
              [selected]="selectedKeys().includes(app.key)"
              (onSelect)="toggleSelection($event, app)"
            ></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>
              <p class="text-medium">{{ app | humanizeAppName | async }}</p>
              @if (app.description) {
                <p class="small text-muted">{{ app.description }}</p>
              }
            </div>
          </c8y-li>
        }
      </c8y-list-group>
    } @else {
      <c8y-ui-empty-state
        [icon]="'c8y-modules'"
        [title]="'No applications available.' | translate"
        [horizontal]="true"
      ></c8y-ui-empty-state>
    }
  </div>

  <div class="modal-footer">
    <button
      class="btn btn-default"
      title="{{ 'Cancel' | translate }}"
      type="button"
      (click)="dismiss()"
    >
      {{ 'Cancel' | translate }}
    </button>
    <button
      class="btn btn-primary"
      title="{{ 'Save' | translate }}"
      type="button"
      [disabled]="isSaving()"
      (click)="save()"
    >
      {{ 'Save' | translate }}
    </button>
  </div>
</div>