@if (isLoadingPurchase()) {
  <div class="checkout-page__loading" role="status" aria-live="polite">
    <span class="checkout-page__spinner" aria-hidden="true"></span>
    <span>Cargando compra...</span>
  </div>
} @else {
  <div class="checkout-page">
    <div class="checkout-page__stepper-col">
      <app-stepper
        #stepper
        [initialStepIndex]="checkoutStepIndex()"
        [disabled]="hasSubmittedTransfer()"
      >
        <app-step label="Datos" [isValid]="isStep1Valid()">
          <app-checkout-data-step
            [form]="form"
            (cancelStep)="onCancel()"
            (continueStep)="onStep1Continue()"
          />
        </app-step>

        <app-step label="Pago">
          <app-checkout-payment-step
            [paymentMethods]="paymentMethods"
            [selectedPaymentMethod]="selectedPaymentMethod()"
            [paymentMethodDisabled]="hasSubmittedTransfer()"
            [copiedTransferField]="copiedTransferField()"
            [transferAccount]="transferAccount()"
            [transferDni]="transferDni()"
            [isGeneratingIntent]="isPaymentLoading()"
            [qrData]="qrData()"
            [qrPaymentStatus]="qrPaymentStatus()"
            [isCheckingQrPayment]="isCheckingQrPayment()"
            [qrPaymentAmount]="cartTotal()"
            [whatsappUrl]="whatsappUrl()"
            [transferValidationStatus]="transferValidationStatus()"
            (paymentMethodChange)="selectPaymentMethod($event)"
            (copyTransferValue)="copyTransferValue($event.field, $event.value)"
            (cancelStep)="onCancel()"
            (generateTransferIntent)="generateTransferIntent($event)"
            (complete)="onComplete()"
            (retryQrPolling)="retryQrPolling()"
          />
        </app-step>
      </app-stepper>
    </div>

    <div class="checkout-page__cart-col">
      @if (checkoutRemainingTime(); as remainingTime) {
        <div
          class="checkout-page__mobile-countdown d-flex d-md-none align-items-baseline justify-content-center gap-3"
          role="timer"
          aria-label="Tiempo restante de compra"
        >
          <span class="checkout-page__mobile-countdown-label">Tiempo restante de compra:</span>
          <span class="checkout-page__mobile-countdown-value">{{ remainingTime }}</span>
        </div>
      }

      <app-cart
        title="COMPRA"
        [items]="mappedCartItems()"
        [subtotal]="cartSubtotal()"
        [discount]="cartDiscount()"
        [total]="cartTotal()"
        [readonly]="true"
        [allowModify]="true"
        [showModifyWhenReadonly]="true"
        [modifyAsAction]="true"
        [editingDisabled]="isPurchaseModificationDisabled()"
        backgroundColor="transparent"
        (modify)="onModifyPurchase()"
      />
    </div>
  </div>
}