{% import '@SyliusUi/Macro/flags.html.twig' as flags %}

{% import '@SyliusShop/Common/Macro/headers.html.twig' as headers %}

{{ headers.default('sylius.ui.order'|trans ~ ' #' ~ order.number) }}

<div class="d-flex flex-wrap gap-2 align-items-center my-3">
    <div>
        {{ order.checkoutCompletedAt|format_date }}
    </div>
    <div>
        {% include [('@SyliusShop/Account/Order/Label/State' ~ '/' ~ order.state ~ '.html.twig'), '@SyliusUi/Label/_default.html.twig'] with {'value': ('sylius.ui.' ~ order.state)|trans} %}
    </div>
    <div>
        {{ order.currencyCode }}
    </div>
    <div>
        {{ flags.fromLocaleCode(order.localeCode) }}{{ order.localeCode|locale_name }}
    </div>
</div>


{% if order.paymentState in ['awaiting_payment'] %}
    <a href="{{ path('sylius_shop_order_show', {'tokenValue': order.tokenValue}) }}" class="btn btn-primary my-3">{{ 'sylius.ui.pay'|trans }}</a>
{% endif %}