{% extends "commerce/_layouts/tax" %}
{% do view.registerAssetBundle('craft\\web\\assets\\admintable\\AdminTableAsset') -%}
{% do view.registerTranslations('commerce', [
    'Include in Price?',
    'Is VAT?',
    'Name',
    'Rate',
    'Tax Category',
    'Tax Zone',
    'Yes',
]) %}

{% block actionButton %}
    {{ craft.commerce.taxes.taxRateActionHtml()|raw }}

    {% if craft.commerce.taxes.createTaxRates() %}
        <a href="{{ url('commerce/tax/taxrates/new') }}" class="btn submit add icon">{{ 'New tax rate'|t('commerce') }}</a>
    {% endif %}
{% endblock %}

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

{% set tableData = [] %}
{% for taxRate in taxRates %}
    {% set tableData = tableData|merge([{
        id: taxRate.id,
        title: taxRate.name|t('site'),
        url: url('commerce/tax/taxrates/'~taxRate.id),
        rate: taxRate.rateAsPercent,
        included: taxRate.include ? true : false,
        vat: taxRate.isVat ? true : false,
        zone: taxRate.isEverywhere ? 'Everywhere'|t('commerce') : { label: taxRate.taxZone.name|t('site')|e, url: taxRate.taxZone.cpEditUrl },
        category: taxRate.taxCategory ? { label: taxRate.taxCategory.name|t('site')|e, url: taxRate.taxCategory.cpEditUrl } : false,
    }]) %}
{% endfor %}

{% js %}
var columns = [
    { name: '__slot:title', title: Craft.t('commerce', 'Name') },
    { name: 'rate', title: Craft.t('commerce', 'Rate') },
    { name: 'included', title: Craft.t('commerce', 'Include in Price?'), callback: function(value) {
      if (value) {
          return '<span data-icon="check" title="'+Craft.escapeHtml(Craft.t('commerce', 'Yes'))+'"></span>';
      }
    } },
    { name: 'vat', title: Craft.t('commerce', 'Is VAT?'), callback: function(value) {
        if (value) {
            return '<span data-icon="check" title="'+Craft.escapeHtml(Craft.t('commerce', 'Yes'))+'"></span>';
        }
    } },
    { name: 'zone', title: Craft.t('commerce', 'Tax Zone'), callback: function(value) {
        if (value && value.url) {
            return '<a href="'+value.url+'">'+value.label+'</a>';
        } else if (value) {
            return value;
        }
    } },
    { name: 'category', title: Craft.t('commerce', 'Tax Category'), callback: function(value) {
        if (value) {
            return '<a href="'+value.url+'">'+value.label+'</a>';
        }
    } },
];

new Craft.VueAdminTable({
    columns: columns,
    container: '#taxrate-vue-admin-table',
    deleteAction: {{ craft.commerce.taxes.deleteTaxRates() ? 'commerce/tax-rates/delete'|json_encode|raw : 'null' }},
    tableData: {{ tableData|json_encode|raw }},
});
{% endjs %}