<div class="tw-mb-1 text-primary" bitTypography="body1">{{ "accessIntelligence" | i18n }}</div>
<h1 bitTypography="h1">{{ "riskInsights" | i18n }}</h1>
<div class="tw-text-muted tw-max-w-4xl tw-mb-2">
  {{ "reviewAtRiskPasswords" | i18n }}
  &nbsp;<a class="text-primary" routerLink="/login">{{ "learnMore" | i18n }}</a>
</div>
<div class="tw-bg-primary-100 tw-rounded-lg tw-w-full tw-px-8 tw-py-2 tw-my-4">
  <i class="bwi bwi-exclamation-triangle bwi-lg tw-text-[1.2rem] text-muted" aria-hidden="true"></i>
  <span class="tw-mx-4">{{
    "dataLastUpdated" | i18n: (dataLastUpdated | date: "MMMM d, y 'at' h:mm a")
  }}</span>
  <a
    bitButton
    buttonType="unstyled"
    class="tw-border-none !tw-font-normal tw-cursor-pointer"
    [bitAction]="refreshData.bind(this)"
  >
    {{ "refresh" | i18n }}
  </a>
</div>
<bit-tab-group [(selectedIndex)]="tabIndex" (selectedIndexChange)="onTabChange($event)">
  <bit-tab label="{{ 'allApplicationsWithCount' | i18n: apps.length }}">
    <tools-all-applications></tools-all-applications>
  </bit-tab>
  <bit-tab *ngIf="isCritialAppsFeatureEnabled">
    <ng-template bitTabLabel>
      <i class="bwi bwi-star"></i>
      {{ "criticalApplicationsWithCount" | i18n: criticalApps.length }}
    </ng-template>
    <tools-critical-applications></tools-critical-applications>
  </bit-tab>
  <bit-tab label="Raw Data">
    <tools-password-health></tools-password-health>
  </bit-tab>
  <bit-tab label="Raw Data + members">
    <tools-password-health-members></tools-password-health-members>
  </bit-tab>
  <bit-tab label="Raw Data + uri">
    <tools-password-health-members-uri></tools-password-health-members-uri>
  </bit-tab>
  <!-- <bit-tab>
    <ng-template bitTabLabel>
      <i class="bwi bwi-envelope"></i>
      {{ "notifiedMembersWithCount" | i18n: priorityApps.length }}
    </ng-template>
    <h2 bitTypography="h2">{{ "notifiedMembers" | i18n }}</h2>
    <tools-notified-members-table></tools-notified-members-table>
  </bit-tab> -->
</bit-tab-group>
