{% do view.registerAssetBundle('craft\\web\\assets\\admintable\\AdminTableAsset') -%}
{% do view.registerTranslations('commerce', [
    'Amount',
    'Date',
    'Gateway',
    'info',
    'No transactions exist.',
    'Payment Amount',
    'Status',
    'Type',
]) %}

<div id="transactionsTab" class="hidden">

    <div id="transactions-vue-admin-table"></div>

    {% if not order.isPaid() %}
        <div class="footer">
            <a class="btn" id="make-payment" data-order-id="{{ order.id }}">{{ 'Make a payment'|t('commerce') }}</a>
        </div>
    {% endif %}
</div>


{% js %}
var columns = [
    { name: 'type', title: Craft.t('commerce', 'Type'),
        callback: function(value) {
            return '<span style="padding-left: '+value.level+'em;">'+
                ((value.level) ? '<span class="extralight">&#8627;</span> ' : '') +
                value.label+'</span>';
        }
    },
    { name: 'status', title: Craft.t('commerce', 'Status'),
        callback: function(value) {
            return '<span class="transaction-status transaction-status-'+value.key+'">'+value.label+'</span>';
        }
    },
    { name: 'amount', title: Craft.t('commerce', 'Amount'),
        callback: function(value) {
            return value;
        }
    },
    { name: 'paymentAmount', title: Craft.t('commerce', 'Payment Amount') },
    { name: 'gateway', title: Craft.t('commerce', 'Gateway') },
    { name: 'date', title: Craft.t('commerce', 'Date') },
    { name: 'info', title: Craft.t('commerce', 'Info'),
        callback: function(value) {
            return '<span class="infoRow" data-info=\''+JSON.stringify(value)+'\'>' +
                '<span class="tableRowInfo" data-icon="info"></span></span>';
        }
    },
    { name: 'actions', title: '',
        callback: function(value) {
            return value;
        }
    }
];

new Craft.VueAdminTable({
    columns: columns,
    container: '#transactions-vue-admin-table',
    emptyMessage: Craft.t('commerce', 'No transactions exist.'),
    padded: true,
    tableData: {{ orderTransactions|json_encode|raw }}
});
{% endjs %}