@if (showCredentialTypes$ | async) {
  <bit-toggle-group
    fullWidth
    class="tw-mb-4"
    [selected]="credentialType$ | async"
    (selectedChange)="onCredentialTypeChanged($event)"
    attr.aria-label="{{ 'type' | i18n }}"
  >
    @for (option of passwordOptions$ | async; track option) {
      <bit-toggle [value]="option.value">
        {{ option.label }}
      </bit-toggle>
    }
  </bit-toggle-group>
}
<bit-card class="tw-flex tw-justify-between tw-mb-4">
  <div class="tw-grow tw-flex tw-items-center tw-min-w-0">
    <bit-color-password class="tw-font-mono" [password]="value$ | async"></bit-color-password>
  </div>
  <div class="tw-flex tw-items-center tw-space-x-1">
    <button
      type="button"
      bitIconButton="bwi-generate"
      buttonType="main"
      (click)="generate(USER_REQUEST)"
      [label]="credentialTypeGenerateLabel$ | async"
      [disabled]="!(algorithm$ | async)"
    >
      {{ credentialTypeGenerateLabel$ | async }}
    </button>
    <button
      type="button"
      bitIconButton="bwi-clone"
      buttonType="main"
      showToast
      [label]="credentialTypeCopyLabel$ | async"
      [appCopyClick]="value$ | async"
      [valueLabel]="credentialTypeLabel$ | async"
      [disabled]="!(algorithm$ | async)"
    ></button>
  </div>
</bit-card>
@if ((algorithm$ | async)?.id === Algorithm.password) {
  <tools-password-settings
    class="tw-mt-6"
    [account]="account$ | async"
    [disableMargin]="disableMargin"
    (onUpdated)="generate('password settings')"
  />
}
@if ((algorithm$ | async)?.id === Algorithm.passphrase) {
  <tools-passphrase-settings
    class="tw-mt-6"
    [account]="account$ | async"
    (onUpdated)="generate('passphrase settings')"
    [disableMargin]="disableMargin"
  />
}