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

<div class="ui segment" id="order-invoices" style="overflow-x: auto;">
    <h3 class="ui dividing header" id="shipping-state">{{ 'sylius_invoicing_plugin.ui.invoices'|trans }}</h3>
    <table class="ui celled compact table">
        <thead>
        <tr>
            <th>{{ 'sylius.ui.number'|trans }}</th>
            <th>{{ 'sylius.ui.channel'|trans }}</th>
            <th>{{ 'sylius_invoicing_plugin.ui.issued_at'|trans }}</th>
            <th>{{ 'sylius.ui.actions'|trans }}</th>
        </tr>
        </thead>
        <tbody>
        {% for invoice in invoices %}
            <tr>
                <td>
                    <a href="{{ path('sylius_invoicing_plugin_admin_invoice_show', {'id': invoice.id}) }}" >{{ invoice.number }}</a>
                </td>
                <td>
                    {% include '@SyliusAdmin/Common/_channel.html.twig' with {'channel': invoice.channel} %}
                <td>
                    {{ invoice.issuedAt|format_date }}
                </td>
                <td>
                    <div class="ui buttons">
                        {{ sylius_template_event('sylius_invoicing.admin.order.invoices.list.actions.buttons', _context) }}
                    </div>
                </td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
</div>