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

<header class="order-show-header">
    <h1><i class="fa fa-shopping-cart"></i>&nbsp;{{ 'sylius.ui.order'|trans }} #{{ order.number }}</h1>

    <p class="order-header-details">
        <span class="order-number">{{ 'sylius.ui.order'|trans }} #{{ order.number }}</span>
        <span class="order-completed-at">{{ order.checkoutCompletedAt|format_date }}</span>
        <span class="order-status">{% include [('@SyliusShop/Account/Order/Label/State' ~ '/' ~ order.state ~ '.html.twig'), '@SyliusUi/Label/_default.html.twig'] with {'value': ('sylius.ui.' ~ order.state)|trans} %}</span>
        <span class="order-currency">{{ order.currencyCode }}</span>
        <span class="order-locale">{{ flags.fromLocaleCode(order.localeCode) }}{{ order.localeCode|locale_name }}</span>
    </p>
</header>

{% if order.paymentState in ['awaiting_payment'] %}
    {{ buttons.default(path('sylius_shop_order_show', {'tokenValue': order.tokenValue}), 'sylius.ui.pay', null, 'money', 'btn-block blue') }}
{% endif %}
