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

{% do view.registerAssetBundle('craft\\web\\assets\\admintable\\AdminTableAsset') -%}
{% do view.registerTranslations('commerce', [
    'Couldn’t reorder countries.',
    'Countries reordered.',
    'Country Code',
    'Name',
    'States',
    'No countries exist yet.',
    'State Required?',
    'Warning, deleting this country will remove it from all addresses and zones, are you sure you want to delete “{name}”?',
]) %}

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

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

{% set tableData = [] %}
{% for country in countries %}
    {% set tableData = tableData|merge([{
        id: country.id,
        title: country.name|t('site'),
        status: country.enabled ? true : false,
        url: url('commerce/store-settings/countries/'~country.id),
        countryCode: country.iso|e,
        statesCount: country.states|length|e,
        stateRequired: country.isStateRequired ? true : false,
    }]) %}

{% endfor %}

{% js %}
    var columns = [
        { name: '__slot:title', title: Craft.t('commerce', 'Name') },
        { name: 'countryCode', title: Craft.t('commerce', 'Country Code') },
        { name: 'statesCount', title: Craft.t('commerce', 'States'), callback: function(value) {
                if (value > 0) {
                    return value;
                }else{
                    return '<span class="light">-</span>';
                }
            }
        },
        { name: 'stateRequired', title: Craft.t('commerce', 'State Required?'), callback: function(value) {
                if (value) {
                    return '<span data-icon="check" title="'+Craft.escapeHtml(Craft.t('app', 'Yes'))+'"></span>';
                }
            }
        }
    ];

    var actions = [
        {
            label: Craft.t('app', 'Set Status'),
            actions: [
                {
                    label: Craft.t('app', 'Enabled'),
                    action: 'commerce/countries/update-status',
                    param: 'status',
                    value: 'enabled',
                    status: 'enabled'
                },
                {
                    label: Craft.t('app', 'Disabled'),
                    action: 'commerce/countries/update-status',
                    param: 'status',
                    value: 'disabled',
                    status: 'disabled'
                }
            ]
        }
    ];

    new Craft.VueAdminTable({
        actions: actions,
        checkboxes: true,
        columns: columns,
        container: '#countries-vue-admin-table',
        deleteAction: 'commerce/countries/delete',
        deleteConfirmationMessage: Craft.t('commerce', 'Warning, deleting this country will remove it from all addresses and zones, are you sure you want to delete “{name}”?'),
        emptyMessage: Craft.t('commerce', 'No countries exist yet.'),
        padded: true,
        reorderAction: 'commerce/countries/reorder',
        reorderFailMessage:    Craft.t('commerce', 'Couldn’t reorder countries.'),
        reorderSuccessMessage: Craft.t('commerce', 'Countries reordered.'),
        tableData: {{ tableData|json_encode|raw }}
    });
{% endjs %}