<div *ngIf="loading">
  <i
    class="bwi bwi-spinner bwi-spin tw-text-muted"
    title="{{ 'loading' | i18n }}"
    aria-hidden="true"
  ></i>
  <span class="tw-sr-only">{{ "loading" | i18n }}</span>
</div>
<div class="tw-mt-4" *ngIf="!dataSource.data.length">
  <bit-no-items [icon]="noItemsIcon" class="tw-text-main">
    <ng-container slot="title">
      <h2 class="tw-font-semibold tw-mt-4">
        {{ "noCriticalApplicationsTitle" | i18n }}
      </h2>
    </ng-container>
    <ng-container slot="description">
      <p class="tw-text-muted">
        {{ "noCriticalApplicationsDescription" | i18n }}
      </p>
    </ng-container>
    <ng-container slot="button">
      <button (click)="goToAllAppsTab()" bitButton buttonType="primary" type="button">
        {{ "markCriticalApplications" | i18n }}
      </button>
    </ng-container>
  </bit-no-items>
</div>
<div class="tw-mt-4 tw-flex tw-flex-col" *ngIf="!loading && dataSource.data.length">
  <div class="tw-flex tw-justify-between tw-mb-4">
    <h2 bitTypography="h2">{{ "criticalApplications" | i18n }}</h2>
    <button
      bitButton
      buttonType="primary"
      type="button"
      [disabled]="!enableRequestPasswordChange"
      (click)="requestPasswordChange()"
    >
      <i class="bwi bwi-envelope tw-mr-2"></i>
      {{
        enableRequestPasswordChange
          ? ("requestPasswordChange" | i18n)
          : ("noCriticalAppsAtRisk" | i18n)
      }}
    </button>
  </div>
  @if (dataService.drawerDetails$ | async; as drawerDetails) {
    <div class="tw-flex tw-gap-6">
      <button
        type="button"
        class="tw-flex-1"
        tabindex="0"
        (click)="dataService.setDrawerForOrgAtRiskMembers('criticalAppsAtRiskMembers')"
      >
        <dirt-card
          #criticalAppsAtRiskMembers
          class="tw-w-full"
          [ngClass]="{
            'tw-bg-primary-100': drawerDetails.invokerId === 'criticalAppsAtRiskMembers',
          }"
          [title]="'atRiskMembers' | i18n"
          [value]="applicationSummary.totalAtRiskMemberCount"
          [maxValue]="applicationSummary.totalMemberCount"
        >
        </dirt-card>
      </button>
      <button
        type="button"
        class="tw-flex-1"
        tabindex="0"
        (click)="dataService.setDrawerForOrgAtRiskApps('criticalAppsAtRiskApplications')"
      >
        <dirt-card
          #criticalAppsAtRiskApplications
          class="tw-w-full"
          [ngClass]="{
            'tw-bg-primary-100': drawerDetails.invokerId === 'criticalAppsAtRiskApplications',
          }"
          [title]="'atRiskApplications' | i18n"
          [value]="applicationSummary.totalAtRiskApplicationCount"
          [maxValue]="applicationSummary.totalApplicationCount"
        >
        </dirt-card>
      </button>
    </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>
