{% extends '_types/root/index.html' %}

{% block filter %}
  <header class="mb-1 sm:mb-2 flex flex-col sm:flex-row sm:items-center justify-between gap-3 sm:gap-4">
    <div class="space-y-1">
      <h1 class="text-xl sm:text-2xl md:text-3xl font-semibold tracking-tight">
        {% if order.status == 'paid' %}
          Payment received
        {% elif order.status == 'failed' %}
          Payment failed
        {% elif order.status == 'missing' %}
          Order not found
        {% else %}
          Payment status: {{ order.status|default('pending')|capitalize }}
        {% endif %}
      </h1>
      <p class="text-xs sm:text-sm text-stone-600">
        {% if order.status == 'paid' %}
          Thanks for your order.
        {% elif order.status == 'failed' %}
          Something went wrong while processing your payment. You can try again below.
        {% elif order.status == 'missing' %}
          We couldn't find that order – it may have expired or never been created.
        {% else %}
          We’re still waiting for a final confirmation from SumUp.
        {% endif %}
      </p>
    </div>

  </header>
{% endblock %}

{% block aside %}
  {# no aside content for now #}
{% endblock %}

{% block content %}
  <div class="max-w-full px-1 py-1">
    {% if order %}
      <div class="rounded-2xl border border-stone-200 bg-white/80 p-4 sm:p-6 space-y-2">
        {% include '_types/order/_summary.html' %}
      </div>
    {% else %}
      <div class="rounded-2xl border border-dashed border-rose-300 bg-rose-50/80 p-4 sm:p-6 text-sm text-rose-800">
        We couldn’t find that order. If you reached this page from an old link, please start a new order.
      </div>
    {% endif %}
    {% include '_types/order/_items.html' %}
    {% include '_types/order/_calendar_items.html' %}
    {% include '_types/order/_ticket_items.html' %}

    {% if order.status == 'failed' and order %}
      <div class="rounded-2xl border border-rose-200 bg-rose-50/80 p-4 sm:p-6 text-sm text-rose-900 space-y-2">
        <p class="font-medium">Your payment was not completed.</p>
        <p>
          You can go back to your cart and try checkout again. If the problem persists,
          please contact us and mention order <span class="font-mono">#{{ order.id }}</span>.
        </p>
      </div>
    {% elif order.status == 'paid' %}
      <div class="rounded-2xl border border-emerald-200 bg-emerald-50/80 p-4 sm:p-6 text-sm text-emerald-900 space-y-2">
        <p class="font-medium">All done!</p>
        <p>We’ll start processing your order shortly.</p>
      </div>
    {% endif %}

  </div>
{% endblock %}
