<div
  class="tw-box-border tw-bg-background tw-block tw-text-main tw-border-solid tw-border tw-border-secondary-100 [&:not(bit-layout_*)]:tw-rounded-lg tw-rounded-lg tw-p-6 tw-min-h-56 tw-overflow-hidden"
  data-testid="password-change-metric-card"
>
  <div bitTypography="h6" class="tw-mb-2">
    {{ "passwordChangeProgress" | i18n }}
  </div>

  @switch (currentView()) {
    @case (PasswordChangeViewEnum.EMPTY) {
      <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">{{ "onceYouReviewApplications" | i18n }}</span>
      </div>
    }

    @case (PasswordChangeViewEnum.NO_TASKS_ASSIGNED) {
      <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: atRiskPasswordCount()
        }}</span>
      </div>

      @if (atRiskPasswordCount() > 0) {
        <div class="tw-mt-4">
          <button
            bitButton
            buttonType="secondary"
            type="button"
            startIcon="bwi-envelope"
            (click)="assignTasks()"
          >
            {{ "assignTasks" | i18n }}
          </button>
        </div>
      }
    }

    @case (PasswordChangeViewEnum.NEW_TASKS_AVAILABLE) {
      <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">{{ "newPasswordsAtRisk" | i18n: unassignedCipherIds() }}</span>
      </div>

      <div class="tw-mt-4">
        <button
          bitButton
          buttonType="secondary"
          type="button"
          startIcon="bwi-envelope"
          (click)="assignTasks()"
        >
          {{ "assignTasks" | i18n }}
        </button>
      </div>
    }

    @case (PasswordChangeViewEnum.PROGRESS) {
      <div class="tw-items-start tw-mb-2">
        <span bitTypography="h3">{{ "percentageCompleted" | i18n: completedTasksPercent() }}</span>
      </div>

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

      <div class="tw-mt-4">
        <div class="tw-flex tw-justify-between">
          <div bitTypography="body2">{{ completedTasksCount() }}</div>
          <div bitTypography="body2">{{ tasksCount() }}</div>
        </div>
      </div>
      <bit-progress-bar
        [hideStartHint]="true"
        [value]="completedTasksPercent()"
        [ariaValueText]="'passwordChangeProgressBar' | i18n"
      />
    }
  }
</div>
