<!-- Organization-wide At-Risk Members -->
@if (data.type === DrawerType.OrgAtRiskMembers) {
  <bit-dialog dialogSize="small">
    <ng-container bitDialogTitle>
      <span>{{ "atRiskMembersWithCount" | i18n: data.members?.length ?? 0 }}</span>
    </ng-container>
    <ng-container bitDialogContent>
      <span bitTypography="body2" class="tw-text-muted">{{
        (data.members?.length > 0 ? "atRiskMemberDescription" : "atRiskMembersDescriptionNone")
          | i18n
      }}</span>

      @if (data.members?.length > 0) {
        <button
          bitLink
          type="button"
          class="tw-my-4 tw-font-bold tw-block"
          startIcon="bwi-download"
          (click)="downloadAtRiskMembers()"
        >
          {{ "downloadCSV" | i18n }}
        </button>
        <ng-container>
          <div class="tw-flex tw-justify-between tw-mt-2 tw-text-muted">
            <div bitTypography="body2" class="tw-font-bold">
              {{ "email" | i18n }}
            </div>
            <div bitTypography="body2" class="tw-font-bold">
              {{ "atRiskApplications" | i18n }}
            </div>
          </div>
          @for (member of data.members; track member.email) {
            <div class="tw-flex tw-justify-between tw-mt-2">
              <div>{{ member.email }}</div>
              <div>{{ member.atRiskApplicationCount }}</div>
            </div>
          }
        </ng-container>
      }
    </ng-container>
  </bit-dialog>
}

<!-- Application-specific At-Risk Members -->
@if (data.type === DrawerType.AppAtRiskMembers) {
  <bit-dialog dialogSize="small">
    <ng-container bitDialogTitle>
      <span>{{ data.applicationName }}</span>
    </ng-container>
    <ng-container bitDialogContent>
      <div bitTypography="body1" class="tw-mb-2">
        {{ "atRiskMembersWithCount" | i18n: data.members?.length ?? 0 }}
      </div>
      <div bitTypography="body2" class="tw-text-muted tw-mb-2">
        {{
          (data.members?.length > 0
            ? "atRiskMembersDescriptionWithApp"
            : "atRiskMembersDescriptionWithAppNone"
          ) | i18n: data.applicationName
        }}
      </div>
      <div class="tw-mt-1">
        @for (member of data.members; track member.email) {
          <div>{{ member.email }}</div>
        }
      </div>
    </ng-container>
  </bit-dialog>
}

<!-- Organization-wide At-Risk Applications -->
@if (data.type === DrawerType.OrgAtRiskApps) {
  <bit-dialog dialogSize="small">
    <ng-container bitDialogTitle>
      <span>{{ "atRiskApplicationsWithCount" | i18n: data.applications?.length ?? 0 }}</span>
    </ng-container>
    <ng-container bitDialogContent>
      <span bitTypography="body2" class="tw-text-muted">{{
        (data.applications?.length > 0
          ? "atRiskApplicationsDescription"
          : "atRiskApplicationsDescriptionNone"
        ) | i18n
      }}</span>
      @if (data.applications?.length > 0) {
        <ng-container>
          <button
            bitLink
            type="button"
            class="tw-my-4 tw-font-bold tw-block"
            startIcon="bwi-download"
            (click)="downloadAtRiskApplications()"
          >
            {{ "downloadCSV" | i18n }}
          </button>
          <div class="tw-flex tw-justify-between tw-mt-2 tw-text-muted">
            <div bitTypography="body2" class="tw-font-bold">
              {{ "application" | i18n }}
            </div>
            <div bitTypography="body2" class="tw-font-bold">
              {{ "atRiskPasswords" | i18n }}
            </div>
          </div>
          @for (app of data.applications; track app.applicationName) {
            <div class="tw-flex tw-justify-between tw-mt-2">
              <div>{{ app.applicationName }}</div>
              <div>{{ app.atRiskPasswordCount }}</div>
            </div>
          }
        </ng-container>
      }
    </ng-container>
  </bit-dialog>
}

<!-- Critical Applications' At-Risk Members -->
@if (data.type === DrawerType.CriticalAtRiskMembers) {
  <bit-dialog dialogSize="small">
    <ng-container bitDialogTitle>
      <span>{{ "atRiskMembersWithCount" | i18n: data.members?.length ?? 0 }}</span>
    </ng-container>
    <ng-container bitDialogContent>
      <span bitTypography="body2" class="tw-text-muted">{{
        (data.members?.length > 0 ? "atRiskMemberDescription" : "atRiskMembersDescriptionNone")
          | i18n
      }}</span>

      @if (data.members?.length > 0) {
        <button
          bitLink
          type="button"
          class="tw-my-4 tw-font-bold tw-block"
          startIcon="bwi-download"
          (click)="downloadAtRiskMembers()"
        >
          {{ "downloadCSV" | i18n }}
        </button>
        <ng-container>
          <div class="tw-flex tw-justify-between tw-mt-2 tw-text-muted">
            <div bitTypography="body2" class="tw-font-bold">
              {{ "email" | i18n }}
            </div>
            <div bitTypography="body2" class="tw-font-bold">
              {{ "atRiskApplications" | i18n }}
            </div>
          </div>
          @for (member of data.members; track member.email) {
            <div class="tw-flex tw-justify-between tw-mt-2">
              <div>{{ member.email }}</div>
              <div>{{ member.atRiskApplicationCount }}</div>
            </div>
          }
        </ng-container>
      }
    </ng-container>
  </bit-dialog>
}

<!-- Critical Applications' At-Risk Apps -->
@if (data.type === DrawerType.CriticalAtRiskApps) {
  <bit-dialog dialogSize="small">
    <ng-container bitDialogTitle>
      <span>{{ "atRiskApplicationsWithCount" | i18n: data.applications?.length ?? 0 }}</span>
    </ng-container>
    <ng-container bitDialogContent>
      <span bitTypography="body2" class="tw-text-muted">{{
        (data.applications?.length > 0
          ? "atRiskApplicationsDescription"
          : "atRiskApplicationsDescriptionNone"
        ) | i18n
      }}</span>
      @if (data.applications?.length > 0) {
        <ng-container>
          <button
            bitLink
            type="button"
            class="tw-my-4 tw-font-bold tw-block"
            startIcon="bwi-download"
            (click)="downloadAtRiskApplications()"
          >
            {{ "downloadCSV" | i18n }}
          </button>
          <div class="tw-flex tw-justify-between tw-mt-2 tw-text-muted">
            <div bitTypography="body2" class="tw-font-bold">
              {{ "application" | i18n }}
            </div>
            <div bitTypography="body2" class="tw-font-bold">
              {{ "atRiskPasswords" | i18n }}
            </div>
          </div>
          @for (app of data.applications; track app.applicationName) {
            <div class="tw-flex tw-justify-between tw-mt-2">
              <div>{{ app.applicationName }}</div>
              <div>{{ app.atRiskPasswordCount }}</div>
            </div>
          }
        </ng-container>
      }
    </ng-container>
  </bit-dialog>
}
