@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">
    <h2 class="tw-mb-6" bitTypography="h2">{{ "allApplications" | i18n }}</h2>
    <div class="tw-flex tw-gap-6">
      <div
        role="region"
        [attr.aria-label]="'atRiskMembers' | i18n"
        class="tw-flex-1 tw-box-border tw-bg-background tw-block tw-text-main tw-border-solid tw-border tw-border-secondary-300 tw-rounded-lg tw-p-4"
        [ngClass]="{
          'tw-bg-primary-100': drawerDetails.invokerId === 'allAppsOrgAtRiskMembers',
        }"
      >
        <div class="tw-flex tw-flex-col tw-gap-1">
          <span bitTypography="h6" class="tw-flex tw-text-main" id="allAppsOrgAtRiskMembersLabel">{{
            "atRiskMembers" | i18n
          }}</span>
          <div class="tw-flex tw-items-baseline tw-gap-2" role="status" aria-live="polite">
            <span
              bitTypography="h3"
              class="!tw-mb-0"
              aria-describedby="allAppsOrgAtRiskMembersLabel"
              >{{ applicationSummary().totalAtRiskMemberCount }}</span
            >
            <span bitTypography="body2">{{
              "cardMetrics" | i18n: applicationSummary().totalMemberCount
            }}</span>
          </div>
          <div class="tw-flex tw-items-baseline tw-mt-1 tw-gap-2">
            <p bitTypography="body1" class="tw-mb-0">
              <button
                type="button"
                bitLink
                [attr.aria-label]="('viewAtRiskMembers' | i18n) + ': ' + ('atRiskMembers' | i18n)"
                (click)="dataService.setDrawerForOrgAtRiskMembers('allAppsOrgAtRiskMembers')"
              >
                {{ "viewAtRiskMembers" | i18n }}
              </button>
            </p>
          </div>
        </div>
      </div>
      <div
        role="region"
        [attr.aria-label]="'atRiskApplications' | i18n"
        class="tw-flex-1 tw-box-border tw-bg-background tw-block tw-text-main tw-border-solid tw-border tw-border-secondary-300 tw-rounded-lg tw-p-4"
        [ngClass]="{
          'tw-bg-primary-100': drawerDetails.invokerId === 'allAppsOrgAtRiskApplications',
        }"
      >
        <div class="tw-flex tw-flex-col tw-gap-1">
          <span
            bitTypography="h6"
            class="tw-flex tw-text-main"
            id="allAppsOrgAtRiskApplicationsLabel"
            >{{ "atRiskApplications" | i18n }}</span
          >
          <div class="tw-flex tw-items-baseline tw-gap-2" role="status" aria-live="polite">
            <span
              bitTypography="h3"
              class="!tw-mb-0"
              aria-describedby="allAppsOrgAtRiskApplicationsLabel"
              >{{ applicationSummary().totalAtRiskApplicationCount }}</span
            >
            <span bitTypography="body2">{{
              "cardMetrics" | i18n: applicationSummary().totalApplicationCount
            }}</span>
          </div>
          <div class="tw-flex tw-items-baseline tw-mt-1 tw-gap-2">
            <p bitTypography="body1" class="tw-mb-0">
              <button
                type="button"
                bitLink
                [attr.aria-label]="
                  ('viewAtRiskApplications' | i18n) + ': ' + ('atRiskApplications' | i18n)
                "
                (click)="dataService.setDrawerForOrgAtRiskApps('allAppsOrgAtRiskApplications')"
              >
                {{ "viewAtRiskApplications" | i18n }}
              </button>
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="tw-flex tw-mt-8 tw-mb-4 tw-gap-4">
      <bit-search
        [placeholder]="'searchApps' | i18n"
        class="tw-grow"
        [formControl]="searchControl"
      ></bit-search>
      <button
        type="button"
        [buttonType]="'primary'"
        bitButton
        [disabled]="!selectedUrls().size"
        [loading]="markingAsCritical()"
        (click)="markAppsAsCritical()"
        [startIcon]="selectedUrls().size ? 'bwi-star-f' : 'bwi-star'"
      >
        {{ "markAppAsCritical" | i18n }}
      </button>
    </div>

    <app-table-row-scrollable
      [dataSource]="dataSource"
      [showRowCheckBox]="true"
      [showRowMenuForCriticalApps]="false"
      [selectedUrls]="selectedUrls()"
      [openApplication]="drawerDetails.invokerId || ''"
      [checkboxChange]="onCheckboxChange"
      [showAppAtRiskMembers]="showAppAtRiskMembers"
    ></app-table-row-scrollable>
  </div>
}