@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"
      [class.checkout-page__stepper-col--editing]="isEditingItems()"
      [attr.aria-hidden]="isEditingItems()"
      [attr.inert]="isEditingItems() ? '' : null"
    >
      <app-stepper #stepper [initialStepIndex]="checkoutStepIndex()">
        <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()"
            [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>

    @if (isEditingItems()) {
      <div class="checkout-page__editing-notice" role="status">
        <p>Terminá de modificar las cantidades para continuar con el pago.</p>
      </div>
    }

    <div class="checkout-page__cart-col">
      <app-cart
        title="COMPRA"
        [items]="mappedCartItems()"
        [subtotal]="cartSubtotal()"
        [discount]="cartDiscount()"
        [total]="cartTotal()"
        [allowEditing]="
          createdPurchase()?.status === 'created' || createdPurchase()?.status === 'pending_payment'
        "
        [allowRemove]="false"
        [persistQuantityChanges]="false"
        [editing]="isEditingItems()"
        [editingDisabled]="isUpdatingItem() || isPreparingItemEdit()"
        backgroundColor="transparent"
        (editingChange)="onEditingItemsChange($event)"
        (itemQuantityChange)="onPurchaseItemQuantityChange($event)"
      />
    </div>
  </div>
}