@let drawerDetails = dataService.drawerDetails$ | async;
<div class="tw-mt-4 tw-flex tw-flex-col">
  <div class="tw-flex tw-justify-between tw-mb-4">
    <h2 bitTypography="h2">{{ "criticalApplications" | i18n }}</h2>
    <div
      [bitPopoverAnchorFor]="helpMembersCoachmark.popover()"
      [popoverOpen]="helpMembersOpen()"
      [position]="'left-center'"
      [spotlight]="true"
    >
      <button
        bitButton
        buttonType="primary"
        type="button"
        [disabled]="!enableRequestPasswordChange"
        (click)="requestPasswordChange()"
        startIcon="bwi-envelope"
      >
        {{
          enableRequestPasswordChange
            ? ("requestPasswordChange" | i18n)
            : ("noCriticalAppsAtRisk" | i18n)
        }}
      </button>
    </div>
    <dirt-ai-coachmark #helpMembersCoachmark stepId="helpMembers"></dirt-ai-coachmark>
  </div>
  <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 === 'criticalAppsAtRiskMembers',
      }"
    >
      <div class="tw-flex tw-flex-col tw-gap-1">
        <span bitTypography="h6" class="tw-flex tw-text-main" id="criticalAppsAtRiskMembersLabel">{{
          "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="criticalAppsAtRiskMembersLabel"
            >{{ 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.setDrawerForCriticalAtRiskMembers('criticalAppsAtRiskMembers')"
            >
              {{ "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 === 'criticalAppsAtRiskApplications',
      }"
    >
      <div class="tw-flex tw-flex-col tw-gap-1">
        <span
          bitTypography="h6"
          class="tw-flex tw-text-main"
          id="criticalAppsAtRiskApplicationsLabel"
          >{{ "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="criticalAppsAtRiskApplicationsLabel"
            >{{ 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.setDrawerForCriticalAtRiskApps('criticalAppsAtRiskApplications')"
            >
              {{ "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>
  </div>

  <app-table-row-scrollable
    [dataSource]="dataSource"
    [showRowCheckBox]="false"
    [showRowMenuForCriticalApps]="true"
    [openApplication]="drawerDetails.invokerId || ''"
    [showAppAtRiskMembers]="showAppAtRiskMembers"
    [unmarkAsCritical]="removeCriticalApplication"
  ></app-table-row-scrollable>
</div>