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

{% from "commerce/_includes/settings" import indexInlineList %}

{% do view.registerAssetBundle('craft\\web\\assets\\admintable\\AdminTableAsset') -%}
{% do view.registerTranslations('commerce', [
  'Countries/States',
  'Has Zip Condition?',
  'Name',
  'Description',
  'Type',
  'Countries/States',
  'Has Zip Condition?',
]) %}

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

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

{% set tableData = [] %}
{% for shippingZone in shippingZones %}
	{% set tableData = tableData|merge([{
        id: shippingZone.id,
        title: shippingZone.name|t('site'),
        url: url('commerce/shipping/shippingzones/'~shippingZone.id),
        description: shippingZone.description|t('site')|e,
        type: shippingZone.isCountryBased ? 'Country-based'|t('commerce')|e : 'State-based'|t('commerce')|e,
        countryState: shippingZone.isCountryBased ? shippingZone.getCountriesNames()|join(', ')|e : shippingZone.getStatesNames()|join(', ')|e,
        zipCondition: shippingZone.zipCodeConditionFormula ? true : false,
    }]) %}
{% endfor %}

{% js %}
    var columns = [
        { name: '__slot:title', title: Craft.t('commerce', 'Name') },
        { name: 'description', title: Craft.t('commerce', 'Description') },
        { name: 'type', title: Craft.t('commerce', 'Type') },
        { name: 'countryState', title: Craft.t('commerce', 'Countries/States') },
        {
            name: 'zipCondition',
            title: Craft.t('commerce', 'Has Zip Condition?'),
            callback: function(value) {
                if (value) {
                    return '<div data-icon="check"></div>';
                }
            }
        },
    ];

    new Craft.VueAdminTable({
        columns: columns,
        container: '#shipping-vue-admin-table',
        deleteAction: 'commerce/shipping-zones/delete',
        tableData: {{ tableData|json_encode|raw }},
    });
{% endjs %}