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

<header class="order-show-header">

    <div class="row">
        <div class="col-md">
            {% set subtitle %}
                <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>
            {% endset %}
            {{ headers.shop('sylius.ui.order'|trans~' #'~order.number, null, subtitle) }}
        </div>
        {% if order.paymentState in ['awaiting_payment'] %}
            <div class="col-md-auto">
                <a class="btn btn-outline-secondary" href="{{ path('sylius_shop_order_show', {'tokenValue': order.tokenValue}) }}">{{ 'sylius.ui.pay'|trans }} ›</a>
            </div>
        {% endif %}
    </div>
</header>


