<div class="payment-panel__card">
  <h3 class="payment-panel__title">
    {{ transferAccount() ? 'Transferí a la siguiente cuenta desde cualquier billetera' : 'Solicitá los datos de transferencia' }}
  </h3>
  <div class="payment-panel__divider"></div>

  @if (!transferAccount()) {
    <form class="payment-panel__request" (submit)="$event.preventDefault(); submitPayerDni()">
      <p class="payment-panel__description">
        Ingresá el DNI de la persona que realizará la transferencia para poder identificar el pago.
      </p>

      <label class="payment-panel__label" for="transfer-payer-dni">DNI del pagador</label>
      <app-input
        id="transfer-payer-dni"
        type="text"
        placeholder="Ej: 12345678"
        [maxlength]="8"
        [invalid]="!!payerDniError()"
        [disabled]="isLoading()"
        [value]="payerDni()"
        (valueChange)="payerDni.set($any($event).toString())"
      />

      @if (payerDniError(); as error) {
        <small class="payment-panel__error">{{ error }}</small>
      } @else if (requestError(); as error) {
        <small class="payment-panel__error">{{ error }}</small>
      }

      <app-button type="submit" buttonClass="w-100" [disabled]="isLoading()">
        {{ isLoading() ? 'Solicitando...' : 'Solicitar datos de transferencia' }}
      </app-button>
    </form>
  } @else {
    <div class="payment-panel__account">
      <p class="payment-panel__eyebrow">DATOS DE CUENTA:</p>

      <div class="payment-detail">
        <span class="payment-detail__label">Titular:</span>
        <strong class="payment-detail__value">{{ transferAccount()!.titular }}</strong>
      </div>

      <div class="payment-detail">
        <span class="payment-detail__label">Entidad:</span>
        <strong class="payment-detail__value">{{ transferAccount()!.entidad }}</strong>
      </div>

      <div class="payment-detail payment-detail--copy">
        <span class="payment-detail__label">CVU:</span>
        <strong class="payment-detail__value">{{ transferAccount()!.cvu }}</strong>
        <app-icon-button
          variant="copy"
          ariaLabel="Copiar CVU"
          (click)="requestCopy('cvu', transferAccount()!.cvu)"
        />
      </div>

      @if (copiedTransferField() === 'cvu') {
        <small class="payment-detail__feedback">CVU copiado</small>
      }

      <div class="payment-detail payment-detail--copy">
        <span class="payment-detail__label">Alias:</span>
        <strong class="payment-detail__value">{{ transferAccount()!.alias }}</strong>
        <app-icon-button
          variant="copy"
          ariaLabel="Copiar alias"
          (click)="requestCopy('alias', transferAccount()!.alias)"
        />
      </div>

      @if (copiedTransferField() === 'alias') {
        <small class="payment-detail__feedback">Alias copiado</small>
      }
    </div>
  }
</div>
