<bit-card class="tw-flex tw-justify-between tw-mb-4">
  <div class="tw-grow tw-flex tw-items-center">
    <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="primaryGhost"
      (click)="generate(USER_REQUEST)"
      [label]="credentialTypeGenerateLabel$ | async"
      [disabled]="!(algorithm$ | async)"
    >
      {{ credentialTypeGenerateLabel$ | async }}
    </button>
    <button
      type="button"
      bitIconButton="bwi-clone"
      buttonType="primaryGhost"
      showToast
      [label]="credentialTypeCopyLabel$ | async"
      [appCopyClick]="value$ | async"
      [valueLabel]="credentialTypeLabel$ | async"
      [disabled]="!(algorithm$ | async)"
    >
      {{ credentialTypeCopyLabel$ | async }}
    </button>
  </div>
</bit-card>
<bit-section [disableMargin]="disableMargin">
  <bit-section-header>
    <h2 bitTypography="h6">{{ "options" | i18n }}</h2>
  </bit-section-header>
  <div [ngClass]="{ 'tw-mb-4': !disableMargin }">
    <bit-card>
      <form [formGroup]="username" class="tw-container">
        <bit-form-field>
          <bit-label>{{ "type" | i18n }}</bit-label>
          <bit-select
            [items]="typeOptions$ | async"
            formControlName="nav"
            data-testid="username-type"
          >
          </bit-select>
          @if (credentialTypeHint$ | async) {
            <bit-hint>{{ credentialTypeHint$ | async }}</bit-hint>
          }
        </bit-form-field>
      </form>
      @if (showForwarder$ | async) {
        <form [formGroup]="forwarder" class="tw-container">
          <bit-form-field>
            <bit-label>{{ "service" | i18n }}</bit-label>
            <bit-select
              [items]="forwarderOptions$ | async"
              formControlName="nav"
              data-testid="email-forwarding-service"
            >
            </bit-select>
          </bit-form-field>
        </form>
      }
      @let showAlgorithm = showAlgorithm$ | async;
      @let account = account$ | async;
      @if (showAlgorithm?.id === Algorithm.catchall) {
        <tools-catchall-settings [account]="account" (onUpdated)="generate('catchall settings')" />
      }
      @if (forwarderId$ | async; as forwarderId) {
        <tools-forwarder-settings [forwarder]="forwarderId" [account]="account" />
      }
      @if (showAlgorithm?.id === Algorithm.plusAddress) {
        <tools-subaddress-settings
          [account]="account"
          (onUpdated)="generate('subaddress settings')"
        />
      }
      @if (showAlgorithm?.id === Algorithm.username) {
        <tools-username-settings [account]="account" (onUpdated)="generate('username settings')" />
      }
    </bit-card>
  </div>
</bit-section>
