{% extends 'base.html' %}
{% from '_macros.html' import form_field %}

{% block title %}Confirm purchase · TradeHub{% endblock %}

{% block content %}
<div class="container" style="max-width: 640px;">
  <div class="page-header">
    <h1>Confirm your purchase</h1>
    <p>Review the item and send a note to the seller.</p>
  </div>

  <div class="form-card">
    {# Product summary #}
    <div style="display:flex; gap: var(--space-4); padding-bottom: var(--space-5); border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-5);">
      <img src="{{ product.primary_image }}" alt="{{ product.title }}"
           style="width: 100px; height: 100px; border-radius: var(--radius-md); object-fit: cover;">
      <div style="flex:1;">
        <h3 style="margin-bottom: 4px;">{{ product.title }}</h3>
        <p class="text-muted text-sm">Sold by {{ product.seller.username }}</p>
        <div class="detail-price" style="font-size: 1.5rem; margin-top: var(--space-2);">${{ '%.2f' % product.price }}</div>
      </div>
    </div>

    <form method="POST" novalidate>
      {{ form.hidden_tag() }}

      <div class="form-group">
        <label class="form-label" for="note">Note to seller (optional)</label>
        <textarea id="note" name="note" class="form-textarea" rows="4"
                  placeholder="When would you like to pick this up? Any questions?">{{ form.note.data or '' }}</textarea>
      </div>

      <div style="background: var(--color-primary-soft); padding: var(--space-4); border-radius: var(--radius-md); margin-bottom: var(--space-5); font-size: 13px;">
        <strong><i data-lucide="info" width="14" height="14" style="vertical-align:middle;"></i> How it works</strong>
        <p style="margin-top: 4px; color: var(--color-text-muted);">
          Your order will be sent to the seller. Once they accept, you'll
          arrange pickup or delivery directly via in-app chat.
          Mark the order as complete after the exchange.
        </p>
      </div>

      <div style="display:flex; gap: var(--space-3);">
        <a href="{{ url_for('products.detail', product_id=product.id) }}" class="btn btn-outline">Cancel</a>
        {{ form.submit(class="btn btn-primary btn-lg", style="flex:1;") }}
      </div>
    </form>
  </div>
</div>
{% endblock %}