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

{% if credit_memos|length > 0 %}
    <div class="ui segment" id="credit-memos">
        <h3 class="ui dividing header">{{ 'sylius_refund.ui.credit_memos'|trans }}</h3>
        <table class="ui celled compact small table fixed">
            <thead>
            <tr>
                <th>{{ 'sylius.ui.number'|trans }}</th>
                <th>{{ 'sylius.ui.total'|trans }}</th>
                <th>{{ 'sylius_refund.ui.issued_at'|trans }}</th>
                <th>{{ 'sylius.ui.actions'|trans }}</th>
            </tr>
            </thead>
            <tbody>
            {% for credit_memo in credit_memos %}
                <tr>
                    <td>{{ credit_memo.number }}</td>
                    <td>{{ credit_memo.total|sylius_format_money(credit_memo.currencyCode, credit_memo.localeCode) }}</td>
                    <td>{{ credit_memo.issuedAt|date('d-m-Y') }}</td>
                    <td>
                        {{ sylius_template_event('sylius_refund.shop.order.credit_memos.list.actions.buttons', _context) }}
                    </td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
{% endif %}

<style>
    #credit-memos th, #credit-memos td {
        text-align: left !important;
    }

    #credit-memos td {
        padding: 1rem 0 1rem .5rem !important;
    }

    #credit-memos th:nth-child(3) {
        width: auto;
    }

    #credit-memos th:nth-child(4) {
        width: 170px;
    }
</style>