<ng-container>
  <h1 bitTypography="h1">{{ "riskInsights" | i18n }}</h1>
  <div class="tw-text-main tw-max-w-4xl tw-mb-2">
    {{ "reviewAtRiskPasswords" | i18n }}
  </div>
  <div
    class="tw-bg-primary-100 tw-rounded-lg tw-w-full tw-px-8 tw-py-4 tw-my-4 tw-flex tw-items-center"
  >
    <i
      class="bwi bwi-exclamation-triangle bwi-lg tw-text-[1.2rem] tw-text-muted"
      aria-hidden="true"
    ></i>
    @if (dataLastUpdated) {
      <span class="tw-mx-4">{{
        "dataLastUpdated" | i18n: (dataLastUpdated | date: "MMMM d, y 'at' h:mm a")
      }}</span>
    } @else {
      <span class="tw-mx-4">{{ "noReportRan" | i18n }}</span>
    }
    @let isRunningReport = dataService.isRunningReport$ | async;
    <span class="tw-flex tw-justify-center">
      <button
        *ngIf="!isRunningReport"
        type="button"
        bitButton
        buttonType="secondary"
        class="tw-border-none !tw-font-normal tw-cursor-pointer !tw-py-0"
        tabindex="0"
        [bitAction]="refreshData.bind(this)"
      >
        {{ "riskInsightsRunReport" | i18n }}
      </button>
      <span>
        <i
          *ngIf="isRunningReport"
          class="bwi bwi-spinner bwi-spin tw-text-muted tw-text-[1.2rem]"
          aria-hidden="true"
        ></i>
      </span>
    </span>
  </div>
  <bit-tab-group [(selectedIndex)]="tabIndex" (selectedIndexChange)="onTabChange($event)">
    @if (isRiskInsightsActivityTabFeatureEnabled) {
      <bit-tab label="{{ 'activity' | i18n }}">
        <dirt-all-activity></dirt-all-activity>
      </bit-tab>
    }
    <bit-tab label="{{ 'allApplicationsWithCount' | i18n: appsCount }}">
      <dirt-all-applications></dirt-all-applications>
    </bit-tab>
    <bit-tab>
      <ng-template bitTabLabel>
        <i class="bwi bwi-star"></i>
        {{
          "criticalApplicationsWithCount"
            | i18n: (dataService.criticalReportResults$ | async)?.reportData?.length ?? 0
        }}
      </ng-template>
      <dirt-critical-applications></dirt-critical-applications>
    </bit-tab>
  </bit-tab-group>

  @if (dataService.drawerDetails$ | async; as drawerDetails) {
    <bit-drawer style="width: 30%" [(open)]="isDrawerOpen" (openChange)="dataService.closeDrawer()">
      <ng-container *ngIf="dataService.isActiveDrawerType(drawerTypes.OrgAtRiskMembers)">
        <bit-drawer-header
          title="{{ 'atRiskMembersWithCount' | i18n: drawerDetails.atRiskMemberDetails.length }}"
        >
        </bit-drawer-header>
        <bit-drawer-body>
          <span bitTypography="body1" class="tw-text-muted tw-text-sm">{{
            (drawerDetails.atRiskMemberDetails.length > 0
              ? "atRiskMembersDescription"
              : "atRiskMembersDescriptionNone"
            ) | i18n
          }}</span>
          <ng-container *ngIf="drawerDetails.atRiskMemberDetails.length > 0">
            <div class="tw-flex tw-justify-between tw-mt-2 tw-text-muted">
              <div bitTypography="body2" class="tw-text-sm tw-font-bold">
                {{ "email" | i18n }}
              </div>
              <div bitTypography="body2" class="tw-text-sm tw-font-bold">
                {{ "atRiskPasswords" | i18n }}
              </div>
            </div>
            <ng-container *ngFor="let member of drawerDetails.atRiskMemberDetails">
              <div class="tw-flex tw-justify-between tw-mt-2">
                <div>{{ member.email }}</div>
                <div>{{ member.atRiskPasswordCount }}</div>
              </div>
            </ng-container>
          </ng-container>
        </bit-drawer-body>
      </ng-container>

      @if (dataService.isActiveDrawerType(drawerTypes.AppAtRiskMembers)) {
        <bit-drawer-header title="{{ drawerDetails.appAtRiskMembers.applicationName }}">
        </bit-drawer-header>
        <bit-drawer-body>
          <div bitTypography="body1" class="tw-mb-2">
            {{ "atRiskMembersWithCount" | i18n: drawerDetails.appAtRiskMembers.members.length }}
          </div>
          <div bitTypography="body1" class="tw-text-muted tw-text-sm tw-mb-2">
            {{
              (drawerDetails.appAtRiskMembers.members.length > 0
                ? "atRiskMembersDescriptionWithApp"
                : "atRiskMembersDescriptionWithAppNone"
              ) | i18n: drawerDetails.appAtRiskMembers.applicationName
            }}
          </div>
          <div class="tw-mt-1">
            <ng-container *ngFor="let member of drawerDetails.appAtRiskMembers.members">
              <div>{{ member.email }}</div>
            </ng-container>
          </div>
        </bit-drawer-body>
      }

      @if (dataService.isActiveDrawerType(drawerTypes.OrgAtRiskApps)) {
        <bit-drawer-header
          title="{{ 'atRiskApplicationsWithCount' | i18n: drawerDetails.atRiskAppDetails.length }}"
        >
        </bit-drawer-header>

        <bit-drawer-body>
          <span bitTypography="body2" class="tw-text-muted tw-text-sm">{{
            (drawerDetails.atRiskAppDetails.length > 0
              ? "atRiskApplicationsDescription"
              : "atRiskApplicationsDescriptionNone"
            ) | i18n
          }}</span>
          <ng-container *ngIf="drawerDetails.atRiskAppDetails.length > 0">
            <div class="tw-flex tw-justify-between tw-mt-2 tw-text-muted">
              <div bitTypography="body2" class="tw-text-sm tw-font-bold">
                {{ "application" | i18n }}
              </div>
              <div bitTypography="body2" class="tw-text-sm tw-font-bold">
                {{ "atRiskPasswords" | i18n }}
              </div>
            </div>
            <ng-container *ngFor="let app of drawerDetails.atRiskAppDetails">
              <div class="tw-flex tw-justify-between tw-mt-2">
                <div>{{ app.applicationName }}</div>
                <div>{{ app.atRiskPasswordCount }}</div>
              </div>
            </ng-container>
          </ng-container>
        </bit-drawer-body>
      }
    </bit-drawer>
  }
</ng-container>
