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

{% block filter %}
  <header class="mb-6 sm:mb-8">
    <h1 class="text-xl sm:text-2xl md:text-3xl font-semibold tracking-tight">
      Checkout error
    </h1>
    <p class="text-xs sm:text-sm text-stone-600">
      We tried to start your payment with SumUp but hit a problem.
    </p>
  </header>
{% endblock %}

{% block content %}
  <div class="max-w-full px-3 py-3 space-y-4">
    <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">Something went wrong.</p>
      <p>
        {{ error or "Unexpected error while creating the hosted checkout session." }}
      </p>
      {% if order %}
        <p class="text-xs text-rose-800/80">
          Order ID: <span class="font-mono">#{{ order.id }}</span>
        </p>
      {% endif %}
    </div>

    <div>
      <a
        href="{{ cart_url('/') }}"
        class="inline-flex items-center px-3 py-2 text-xs sm:text-sm rounded-full border border-stone-300 bg-white hover:bg-stone-50 transition"
      >
        <i class="fa fa-shopping-cart mr-2" aria-hidden="true"></i>
        Back to cart
      </a>
    </div>
  </div>
{% endblock %}
