{% extends "commerce/_layouts/settings" %}

{% set title = "Gateways"|t('commerce') %}

{% do view.registerAssetBundle('craft\\web\\assets\\admintable\\AdminTableAsset') -%}
{% do view.registerTranslations('commerce', [
    'Couldn’t reorder gateways.',
    'Customer Enabled?',
    'Gateways reordered.',
    'Handle',
    'ID',
    'Name',
    'Type',
    'Yes',
]) %}

{% block actionButton %}
    <a href="{{ url('commerce/settings/gateways/new') }}" class="btn submit add icon">{{ 'New gateway'|t('commerce') }}</a>
{% endblock %}

{% block content %}
    <div id="gateways-vue-admin-table"></div>
{% endblock %}

{% set tableData = [] %}
{% for gateway in gateways %}
    {% set tableData = tableData|merge([{
        id: gateway.id,
        title: gateway.name|t('site'),
        url: gateway.cpEditUrl,
        handle: gateway.handle|e,
        type: {
            missing: gateway is missing ? true : false,
            name: gateway is missing? gateway.expectedType : gateway.displayName()
        },
        customerEnabled: gateway.isFrontendEnabled ? true : false
    }]) %}
{% endfor %}

{% js %}
    var columns = [
        { name: 'id', title: Craft.t('commerce', 'ID') },
        { name: '__slot:title', title: Craft.t('commerce', 'Name') },
        { name: '__slot:handle', title: Craft.t('commerce', 'Handle') },
        {
            name: 'type',
            title: Craft.t('commerce', 'Type'),
            callback: function(value) {
                if (value.missing) {
                    return '<span class="error">'+value.name+'</span>';
                }

                return value.name;
            }
        },
        {
            name: 'customerEnabled',
            title: Craft.t('commerce', 'Customer Enabled?'),
            callback: function(value) {
                if (value) {
                    return '<div data-icon="check" title="'+Craft.escapeHtml(Craft.t('commerce', 'Yes'))+'"></div>';
                }
            }
        }
    ];

    new Craft.VueAdminTable({
        columns: columns,
        container: '#gateways-vue-admin-table',
        deleteAction: 'commerce/gateways/archive',
        reorderAction: 'commerce/gateways/reorder',
        reorderSuccessMessage: Craft.t('commerce', 'Gateways reordered.') ,
        reorderFailMessage:    Craft.t('commerce', 'Couldn’t reorder gateways.'),
        tableData: {{ tableData|json_encode|raw }}
    });
{% endjs %}