{% extends 'layout/checkout.html.twig' %}
{% block title %}{% trans from 'meta' %}checkout.title{% endtrans %}{% endblock %}
{% block meta %}
    <meta name="robots" content="index,follow">
    <meta name="description" lang="{{ app.request.locale }}"
          content="{% trans from 'meta' %}shop.description{% endtrans %}">
    <meta property="og:site_name" content="{% trans from 'meta' %}shop.title{% endtrans %}">
    <meta property="og:title" content="{% trans from 'meta' %}shop.title{% endtrans %}">
    <meta property="og:type" content="website">
    <meta property="og:url" content="{{ app.request.uri }}">
    <meta property="og:image" content="{{ absolute_url('images/logo-meta.jpg') }}">
    <meta property="og:locale" content="{{ app.request.locale }}">
    <meta property="og:image:type" content="image/jpeg">
    <meta property="og:image:width" content="600">
    <meta property="og:image:height" content="450">
    <meta property="og:description"
          content="{% trans from 'meta' %}shop.description{% endtrans %}">
{% endblock meta %}

{% block main %}
    {% set payment_warnings = app.flashes('warning') %}
    {% set payment_errors = app.flashes('error') %}

    {% if payment_warnings is not empty or payment_errors is not empty %}
        <section data-payment-return-container class="border-b border-gold/10 bg-white/70 transition-opacity duration-300">
            <div class="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
                <div class="space-y-4">
                    {% for message in payment_warnings %}
                        <div data-payment-return-alert class="rounded-sm border border-orange-300 bg-orange-50 px-4 py-4 text-sm text-orange-900 transition-opacity duration-300">
                            <div class="font-semibold uppercase tracking-[0.08em] text-orange-700">
                                {{ 'checkout_design.payment_return_warning'|trans }}
                            </div>
                            <div class="mt-2">{{ message }}</div>
                            <div class="mt-2 text-orange-800/80">
                                {{ 'checkout_design.payment_retry_notice'|trans }}
                            </div>
                        </div>
                    {% endfor %}

                    {% for message in payment_errors %}
                        <div data-payment-return-alert class="rounded-sm border border-red-300 bg-red-50 px-4 py-4 text-sm text-red-900 transition-opacity duration-300">
                            <div class="font-semibold uppercase tracking-[0.08em] text-red-700">
                                {{ 'checkout_design.payment_return_error'|trans }}
                            </div>
                            <div class="mt-2">{{ message }}</div>
                            <div class="mt-2 text-red-800/80">
                                {{ 'checkout_design.payment_retry_notice'|trans }}
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </section>
    {% endif %}

    {{ component('cart:CheckoutForm', { cartId: checkout_cart_id|default(null) }) }}
{% endblock %}
