{% extends "django_program/base.html" %}

{% block title %}Order Confirmed{% endblock %}

{% block content %}
<div class="success-banner">
  &#10003; Your order has been placed successfully.
</div>

<div class="page-header">
  <h1>Order Confirmed</h1>
</div>

<div style="text-align: center; margin-bottom: 2rem;">
  <p style="font-size: 0.9rem; color: var(--color-text-secondary); margin-bottom: 0.5rem;">Order Reference</p>
  <p class="mono" style="font-size: 2rem; font-weight: 800; color: var(--color-text); letter-spacing: 0.02em;">{{ order.reference }}</p>
</div>

{# ---- Line Items ---- #}
<table class="data-table" style="margin-bottom: 1.5rem;">
  <thead>
    <tr>
      <th>Description</th>
      <th class="text-center">Qty</th>
      <th class="text-right">Unit Price</th>
      <th class="text-right">Line Total</th>
    </tr>
  </thead>
  <tbody>
    {% for item in order.line_items.all %}
    <tr>
      <td>{{ item.description }}</td>
      <td class="text-center">{{ item.quantity }}</td>
      <td class="text-right">${{ item.unit_price }}</td>
      <td class="text-right">${{ item.line_total }}</td>
    </tr>
    {% endfor %}
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3" class="text-right" style="font-weight: 600; color: var(--color-text-muted); font-size: 0.85rem;">Subtotal</td>
      <td class="text-right">${{ order.subtotal }}</td>
    </tr>
    {% if order.discount_amount %}
    <tr>
      <td colspan="3" class="text-right" style="font-weight: 600; color: var(--color-success); font-size: 0.85rem;">Discount</td>
      <td class="text-right" style="color: var(--color-success);">-${{ order.discount_amount }}</td>
    </tr>
    {% endif %}
    <tr>
      <td colspan="3" class="text-right" style="font-weight: 700; font-size: 1rem;">Total</td>
      <td class="text-right" style="font-weight: 700; font-size: 1rem;">${{ order.total }}</td>
    </tr>
  </tfoot>
</table>

<div style="display: flex; align-items: center; gap: 0.75rem; margin-bottom: 2rem;">
  <span style="font-size: 0.9rem; color: var(--color-text-secondary);">Status:</span>
  <span class="badge badge--{{ order.status }}">{{ order.get_status_display }}</span>
</div>

<div style="display: flex; gap: 0.75rem; flex-wrap: wrap;">
  {% if conference %}
  <a href="{% url 'registration:order-detail' conference.slug order.reference %}" class="btn btn-secondary">View Order Details</a>
  <a href="{% url 'pretalx:schedule' conference.slug %}" class="btn btn-primary">Return to Conference</a>
  {% endif %}
</div>
{% endblock %}