@if (loading()) {
  <dirt-report-loading></dirt-report-loading>
} @else {
  @let drawerDetails = drawerState();
  <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"
          startIcon="bwi-envelope"
          [disabled]="!enableRequestPasswordChange()"
          (click)="requestPasswordChange()"
        >
          {{
            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)="openCriticalAtRiskMembersDrawer()"
              >
                {{ "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)="openCriticalAtRiskAppsDrawer()"
              >
                {{ "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>

    <dirt-applications-table-v2
      [dataSource]="dataSource"
      [openApplication]="drawerDetails?.invokerId || ''"
      [onUnmarkAsCritical]="removeCriticalApplication"
      (showAppAtRiskMembers)="showAppAtRiskMembers($event)"
    ></dirt-applications-table-v2>
  </div>
}