{% extends "base.html" %}

{% block content %}
<div class="container narrow">
  <div class="success-card">
    <div class="success-icon">🎉</div>
    <h1>Bestellung erfolgreich erfasst!</h1>
    <p class="success-sub">Vielen Dank, <strong>{{ order.display_name }}</strong>!</p>
    <p>Deine Brotzeit für <strong>{{ order.event.title }}</strong> ist fest reserviert.</p>

    <div class="order-receipt">
      <h3>Deine ausgewählten Schmankerl:</h3>
      <ul class="receipt-list">
        {% for item in order.items %}
        <li>
          <span><strong>{{ item.quantity }}x</strong> {{ item.product.name }}</span>
          <span>{{ "%.2f"|format(item.unit_price * item.quantity) }} €</span>
        </li>
        {% endfor %}
      </ul>
      <div class="receipt-total">
        <span>Gesamtbetrag:</span>
        <span class="total-price">{{ "%.2f"|format(order.total_price) }} €</span>
      </div>
    </div>

    <div class="success-actions" style="display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 24px;">
      <a href="/" class="btn-primary">Zurück zur Übersicht</a>
      <a href="/events/{{ order.event_id }}/calendar.ics" class="btn-secondary" style="text-decoration: none; display: inline-flex; align-items: center;">📅 Zu Outlook (.ics) hinzufügen</a>
      <a href="/admin" class="btn-secondary" style="text-decoration: none;">Zum Einkäufer-Cockpit</a>
    </div>
  </div>
</div>
{% endblock %}