@if ((dataService.reportStatus$ | async) == ReportStatusEnum.Loading) {
  <dirt-report-loading></dirt-report-loading>
} @else {
  @let drawerDetails = dataService.drawerDetails$ | async;
  <div class="tw-mt-4 tw-flex tw-flex-col">
    <div class="tw-flex tw-mb-4 tw-gap-4 tw-items-center">
      <bit-search
        [placeholder]="'searchApps' | i18n"
        class="tw-min-w-96 tw-w-1/2"
        [formControl]="searchControl"
      ></bit-search>

      <bit-chip-filter
        [placeholderText]="'filter' | i18n"
        placeholderIcon="bwi-sliders"
        [options]="filterOptions()"
        [ngModel]="selectedFilter()"
        (ngModelChange)="setFilterApplicationsByStatus($event)"
        fullWidth="false"
        class="tw-min-w-48"
      >
      </bit-chip-filter>

      <div class="tw-ml-auto tw-gap-4 tw-flex">
        @if (visibleSelectedApps().size > 0) {
          @if (allSelectedAppsAreCritical()) {
            <button
              type="button"
              [buttonType]="'primary'"
              bitButton
              class="tw-ml-auto"
              [loading]="updatingCriticalApps()"
              (click)="unmarkAppsAsCritical()"
              data-testid="unmark-critical-button"
            >
              {{ "markAppCountAsNotCritical" | i18n: visibleSelectedApps().size }}
            </button>
          } @else {
            <button
              type="button"
              [buttonType]="'primary'"
              bitButton
              class="tw-ml-auto"
              [loading]="updatingCriticalApps()"
              (click)="markAppsAsCritical()"
              data-testid="mark-critical-button"
            >
              {{ "markAppCountAsCritical" | i18n: visibleSelectedApps().size }}
            </button>
          }
        }

        <button
          bitButton
          buttonType="secondary"
          type="button"
          startIcon="bwi-envelope"
          [disabled]="!enableRequestPasswordChange()"
          [bitTooltip]="!enableRequestPasswordChange() ? ('allTasksAssigned' | i18n) : null"
          [addTooltipToDescribedby]="!enableRequestPasswordChange()"
          (click)="requestPasswordChange()"
          data-testid="assign-tasks-button"
        >
          {{ "assignTasks" | i18n }}
        </button>

        <button
          type="button"
          bitIconButton="bwi-download"
          buttonType="subtleGhost"
          [label]="'downloadCSV' | i18n"
          [disabled]="!dataSource.filteredData.length"
          (click)="downloadApplicationsCSV()"
        ></button>
      </div>
    </div>

    <app-table-row-scrollable-m11
      [dataSource]="dataSource"
      [selectedUrls]="selectedUrls()"
      [openApplication]="drawerDetails.invokerId || ''"
      [showAppAtRiskMembers]="showAppAtRiskMembers"
      (checkboxChange)="onCheckboxChange($event)"
      (selectAllChange)="onSelectAllChange($event)"
      class="tw-mb-10"
    ></app-table-row-scrollable-m11>

    @if (this.dataSource.filteredData?.length === 0) {
      <div class="tw-flex tw-mt-10 tw-justify-center">
        <span bitTypography="body2">{{ "noApplicationsMatchTheseFilters" | i18n }}</span>
      </div>
    }
  </div>
}