<div class="page-container">
  <div class="d-flex align-items-center mb-4">
    <a routerLink="../" class="text-decoration-none " >
      <i class="bi bi-arrow-left fs-5"></i>
    </a>
    <h2 class="page-title m-0">MIS COMPRAS</h2>
  </div>

  @if (isLoading()) {
    <p class="purchase-loading">Cargando detalle de compra...</p>
  } @else if (purchase(); as purchase) {
    <div class="d-flex justify-content-between align-items-center mb-4 pb-3" style="border-bottom: 1px solid #dddddd;">
      <div class="purchase-info">
        <span class="purchase-id">Compra {{ purchase.id }}.</span>
        <span class="purchase-date">Fecha de compra: {{ purchase.date }}</span>
      </div>
      <div class="purchase-total ">
        <span class="purchase-total-label">Total:</span>
        <span class="purchase-total-value">${{ purchase.total }}</span>
      </div>
    </div>

    <p style="font-size: 12px; color: #666666; margin:0;">Productos:</p>

    <div class="d-flex flex-column">
      @for (item of purchase.items; track item.id) {
        <app-purchase-item [item]="item"></app-purchase-item>
      } @empty {
        <p class="purchase-empty">No hay productos para mostrar en esta compra.</p>
      }
    </div>
  }
</div>
