{% extends "base.html.jinja" %}
{% block content %}
    <div class="mb-4">
        <h2 class="h4 mb-3">{% if is_cart %}Warenkorb{% else %}Einkauf #{{ order.id }}{% endif %}</h2>
        {% if not is_cart %}<p class="text-muted">Einkauf abgeschickt: {{ order.transaction.timestamp | timestamp_de }}</p>{% endif %}
    </div>

    {% set items = order.items %}

    {% if items|length == 0 %}
        <div class="alert alert-info">Dein Warenkorb ist leer. <a href="/shop" class="alert-link">Weiter einkaufen</a>.</div>
    {% else %}
        <div class="table-responsive">
            <table class="table align-middle">
                <thead>
                    <tr>
                        <th>Artikel</th>
                        <th class="text-center">Menge</th>
                        <th class="text-end">Einzelpreis</th>
                        <th class="text-end">Summe</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    {% set total = namespace(value=0) %}
                    {% for item in items %}
                        {% set price = item.price if item.price is defined else (item.unit_price if item.unit_price is defined else 0) %}
                        {% set subtotal = price * item.quantity %}
                        {% set total.value = total.value + subtotal %}
                        <tr>
                            <td>
                                <div class="fw-semibold">{{ item.product.name }}</div>
                                <div class="text-muted small">{{ item.description or '' }}</div>
                            </td>
                            <td class="text-center" style="width:180px;">
                                {% if is_cart %}
                                <form method="post" action="/shop/cart/update/{{ item.id }}" class="d-flex align-items-center justify-content-center">
                                    <input
                                        type="number"
                                        name="quantity"
                                        value="{% if item.product.allow_fractional %}{{ item.quantity | format_number }}{% else %}{{ item.quantity | int }}{% endif %}"
                                        {% if item.product.allow_fractional %}min="0.01" step="0.01"{% else %}min="1" step="1"{% endif %}
                                        class="form-control form-control-sm me-2"
                                        style="width:80px;"
                                        required>
                                    {% if item.product.unit_of_measure != 'piece' %}<span class="text-muted small ms-1 me-2">{{ item.product.unit_of_measure }}</span>{% endif %}
                                    <button class="btn btn-sm btn-outline-secondary" type="submit">Aktualisieren</button>
                                </form>
                                {% else %}
                                {{ item.quantity | format_number }}{% if item.product.unit_of_measure != 'piece' %} {{ item.product.unit_of_measure }}{% endif %}
                                {% endif %}
                            </td>
                            <td class="text-end">{{ item.product.price | format_number }} €</td>
                            <td class="text-end">{{ item.total_amount | format_number }} €</td>
                            <td class="text-end">
                                {% if is_cart %}<a href="/shop/cart/remove/{{ item.id }}" class="btn btn-sm btn-outline-danger">Entfernen</a>{% endif %}
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="3" class="text-end fw-semibold">Gesamtsumme</td>
                        <td class="text-end fw-bold">{{ order.total_amount | format_number }} €</td>
                        <td></td>
                    </tr>
                </tfoot>
            </table>
        </div>

        {% if is_cart %}
        <div class="d-flex justify-content-between align-items-center mt-3">
            <div>
                <a href="/shop/finalize_order" class="btn btn-primary">Jetzt Buchen</a>
            </div>
        </div>
        {% endif %}
    {% endif %}

{% endblock %}

{% block styles %}
<style>
    .card { border: none; transition: all 0.3s ease; }
</style>
{% endblock %}