<div
  class="tw-flex tw-flex-col tw-p-6 tw-box-border tw-bg-background tw-text-main tw-border-solid tw-border tw-border-secondary-300 tw-rounded-lg tw-h-56 tw-max-h-56"
>
  <div bitTypography="h6" class="tw-mb-2">
    {{ "passwordChangeProgress" | i18n }}
  </div>

  @if (renderMode === renderModes.noCriticalApps) {
    <div class="tw-items-start tw-mb-2">
      <span bitTypography="h3">{{ "assignMembersTasksToMonitorProgress" | i18n }}</span>
    </div>

    <div class="tw-items-baseline tw-gap-2">
      <span bitTypography="body2">{{ "onceYouReviewApps" | i18n }}</span>
    </div>
  }

  @if (renderMode === renderModes.criticalAppsWithAtRiskAppsAndNoTasks) {
    <div class="tw-items-start tw-mb-2">
      <span bitTypography="h3">{{ "assignMembersTasksToMonitorProgress" | i18n }}</span>
    </div>

    <div class="tw-items-baseline tw-gap-2">
      <span bitTypography="body2">{{ "countOfAtRiskPasswords" | i18n: atRiskPasswordsCount }}</span>
    </div>

    <div class="tw-mt-4">
      <button
        bitButton
        buttonType="secondary"
        type="button"
        [disabled]="!canAssignTasks"
        (click)="assignTasks()"
      >
        <i class="bwi bwi-envelope tw-mr-2"></i>
        {{ "assignTasks" | i18n }}
      </button>
    </div>
  }

  @if (renderMode === renderModes.criticalAppsWithAtRiskAppsAndTasks) {
    <div class="tw-items-start tw-mb-2">
      <span bitTypography="h3">{{ "percentageCompleted" | i18n: completedPercent }}</span>
    </div>

    <div class="tw-items-baseline tw-gap-2">
      <span bitTypography="body2">{{
        "securityTasksCompleted" | i18n: completedTasksCount : totalTasksCount
      }}</span>
    </div>

    <div class="tw-mt-4">
      <div class="tw-flex tw-justify-between">
        <div bitTypography="body2">{{ completedTasksCount }}</div>
        <div bitTypography="body2">{{ totalTasksCount }}</div>
      </div>
    </div>
    <bit-progress
      [showText]="false"
      size="small"
      bgColor="primary"
      [barWidth]="completedPercent"
      [ariaLabel]="'passwordChangeProgressBar' | i18n"
    >
    </bit-progress>

    <!-- TODO: Implement reminder functionality -->
    <!-- <div class="tw-items-start tw-mt-4 tw-gap-4">
      <button bitButton type="button" buttonType="secondary">
        <i class="bwi bwi-envelope" aria-hidden="true"></i>
        {{ "sendReminders" | i18n }}
      </button>
    </div> -->
  }
</div>
