<section class="tw-mb-5 bit-compact:tw-mb-4">
  <bit-section-header>
    <h2 bitTypography="h6">{{ "loginCredentials" | i18n }}</h2>
  </bit-section-header>
  <read-only-cipher-card>
    @if (cipher.login.username) {
      <bit-form-field>
        <bit-label [appTextDrag]="cipher.login.username">
          {{ "username" | i18n }}
        </bit-label>
        <input
          id="userName"
          readonly
          bitInput
          type="text"
          [value]="cipher.login.username"
          aria-readonly="true"
          data-testid="login-username"
        />
        <button
          bitIconButton="bwi-clone"
          bitSuffix
          type="button"
          [appCopyClick]="cipher.login.username"
          [valueLabel]="'username' | i18n"
          showToast
          [label]="'copyUsername' | i18n"
          data-testid="copy-username"
        ></button>
      </bit-form-field>
    }
    @if (cipher.login.password) {
      <bit-form-field>
        <bit-label [appTextDrag]="cipher.login.password" id="password-label">
          {{ "password" | i18n }}
        </bit-label>
        <input
          id="password"
          [ngClass]="{ 'tw-hidden': passwordRevealed }"
          readonly
          bitInput
          #passwordInput
          type="password"
          [value]="passwordRevealed ? cipher.login.password : cipher.login.maskedPassword"
          aria-readonly="true"
          data-testid="login-password"
        />
        <!-- Use a wrapping span to "recreate" a readonly input as close as possible -->
        @if (passwordRevealed) {
          <span
            role="textbox"
            tabindex="0"
            data-testid="login-password-color"
            aria-readonly="true"
            aria-labelledby="password-label"
          >
            <bit-color-password
              class="tw-font-mono"
              [password]="cipher.login.password"
            ></bit-color-password>
          </span>
        }
        @if (cipher.viewPassword && passwordRevealed) {
          <button
            bitIconButton="bwi-numbered-list"
            bitSuffix
            type="button"
            data-testid="toggle-password-count"
            [label]="(showPasswordCount ? 'hideCharacterCount' : 'showCharacterCount') | i18n"
            [attr.aria-expanded]="showPasswordCount"
            appStopClick
            (click)="togglePasswordCount()"
          ></button>
        }
        @if (cipher.viewPassword) {
          <button
            bitSuffix
            type="button"
            bitIconButton
            bitPasswordInputToggle
            [toggled]="passwordRevealed"
            data-testid="toggle-password"
            (toggledChange)="pwToggleValue($event)"
          ></button>
        }
        @if (cipher.viewPassword) {
          <button
            bitIconButton="bwi-clone"
            bitSuffix
            type="button"
            [appCopyClick]="cipher.login.password"
            [valueLabel]="'password' | i18n"
            showToast
            [label]="'copyPassword' | i18n"
            data-testid="copy-password"
            (click)="logCopyEvent()"
          ></button>
        }
        @if (showChangePasswordLink) {
          <bit-hint class="tw-flex tw-mb-3 tw-items-center">
            <i class="bwi bwi-exclamation-triangle tw-text-warning" aria-hidden="true"></i>
            <span class="tw-ml-2 tw-mr-1">{{ "atRiskPassword" | i18n }}</span>
            @if (changePasswordLink()) {
              <a
                bitLink
                [href]="changePasswordLink()"
                appStopClick
                (click)="launchChangePasswordEvent()"
              >
                {{ "changeNow" | i18n }}
              </a>
            }
          </bit-hint>
        }
      </bit-form-field>
    }
    @if (showPasswordCount && passwordRevealed) {
      <div [ngClass]="{ 'tw-mt-3': !cipher.login.totp, 'tw-mb-2': true }">
        <bit-color-password
          [password]="cipher.login.password"
          [showCount]="true"
        ></bit-color-password>
      </div>
    }
    @if (cipher.login?.fido2Credentials?.length > 0) {
      <bit-form-field>
        <bit-label [appTextDrag]="fido2CredentialCreationDateValue"
          >{{ "typePasskey" | i18n }}
        </bit-label>
        <input
          id="fido"
          readonly
          bitInput
          type="text"
          [value]="fido2CredentialCreationDateValue"
          aria-readonly="true"
          data-testid="login-passkey"
        />
      </bit-form-field>
    }
    @if (cipher.login.totp) {
      <bit-form-field>
        <bit-label [appTextDrag]="totpCodeCopyObj?.totpCode">
          <div class="tw-flex tw-items-center tw-gap-2">
            {{ "verificationCodeTotp" | i18n }}
            <app-premium-badge [organizationId]="cipher.organizationId"></app-premium-badge>
          </div>
        </bit-label>
        <input
          id="totp"
          readonly
          bitInput
          [type]="!(isPremium$ | async) ? 'password' : 'text'"
          [value]="totpCodeCopyObj?.totpCodeFormatted || '*** ***'"
          aria-readonly="true"
          data-testid="login-totp"
          class="tw-font-mono"
        />
        @if (isPremium$ | async) {
          <div
            bitTotpCountdown
            [cipher]="cipher"
            bitSuffix
            (sendCopyCode)="setTotpCopyCode($event)"
          ></div>
        }
        <button
          bitIconButton="bwi-clone"
          bitSuffix
          type="button"
          [appCopyClick]="totpCodeCopyObj?.totpCode"
          [valueLabel]="'verificationCodeTotp' | i18n"
          showToast
          [label]="'copyVerificationCode' | i18n"
          data-testid="copy-totp"
          [disabled]="!(isPremium$ | async)"
          class="disabled:tw-cursor-default"
        ></button>
      </bit-form-field>
    }
  </read-only-cipher-card>
</section>
