<app-menu-content-section
  class="account-page"
  menuCode="account.purchases"
  titleId="purchase-detail-page-title"
>
  <a
    menuContentPrefix
    routerLink="../"
    class="purchase-back-link text-decoration-none"
    aria-label="Volver a mis compras"
  >
    <i class="bi bi-arrow-left fs-5" aria-hidden="true"></i>
  </a>

  @if (isLoading()) {
    <p class="purchase-loading">Cargando detalle de compra...</p>
  } @else if (purchase(); as purchase) {
    @if (purchase.isInReview) {
      <section class="purchase-review" aria-labelledby="purchase-review-title">
        <h3 id="purchase-review-title" class="purchase-review__title">ESPERANDO CONFIRMACIÓN</h3>
        <p class="purchase-review__message">
          Tu compra aún no ha sido confirmada.<br />
          Si no te contactaste con nosotros, podés hacerlo a través del siguiente WhatsApp
        </p>

        @if (whatsappUrl()) {
          <app-button
            type="button"
            variant="primary"
            hostClass="purchase-review__button"
            (click)="openWhatsApp()"
          >
            WhatsApp
          </app-button>
        }
      </section>
    }

    <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>
  }
</app-menu-content-section>
