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

{% do view.registerAssetBundle('craft\\web\\assets\\admintable\\AdminTableAsset') -%}
{% do view.registerTranslations('commerce', [
    'Name',
    'Abbreviation',
    'Country',
    'No states exist yet.',
    'Warning, deleting this state will remove it from all addresses and zones, are you sure you want to delete “{name}”?',
]) %}

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

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

{% set tableData = [] %}
{% for state in states %}
	{% set tableData = tableData|merge([{
        id: state.id,
        title: state.name|t('site'),
        url: url('commerce/store-settings/states/'~state.id),
        status: state.enabled ? true : false,
        abbreviation: state.abbreviation|e,
        country: {
            status: state.country.enabled ? true : false,
            country: state.country.name|t('site')|e
        }
    }]) %}
{% endfor %}


{% js %}
    var columns = [
        { name: '__slot:title', title: Craft.t('commerce', 'Name') },
        { name: 'abbreviation', title: Craft.t('commerce', 'Abbreviation') },
        { name: 'country', title: Craft.t('commerce', 'Country'),
            callback: function(value) {
                if (value) {
                    var status = value.status ? 'enabled' : '';
                    return '<span class="status '+status+'"></span>'+value.country;
                }
            }
        }
    ];

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

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