{% extends "settings/assets/_layout" %}
{% set selectedNavItem = 'transforms' %}
{% set readOnly = readOnly ?? false %}

{% do view.registerAssetBundle('craft\\web\\assets\\admintable\\AdminTableAsset') -%}

{% do view.registerTranslations('app', [
    "Name",
    "Handle",
    "Mode",
    "Dimensions",
    "Interlace",
    "Format",
    "No image transforms exist yet.",
]) %}

{% if readOnly %}
    {% set contentNotice = readOnlyNotice() %}
{% endif %}

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

    {% if not readOnly %}
        <div class="buttons">
            <a class="btn submit add icon" href="{{ url('settings/assets/transforms/new') }}">{{ "New image transform"|t('app') }}</a>
        </div>
    {% endif %}
{% endblock %}

{% set tableData = [] %}
{% for transform in transforms %}
    {% if transform.mode %}
        {% set mode = modes[transform.mode] %}
    {%  endif %}

    {% set tableData = tableData|merge([{
        id: transform.id,
        title: transform.name|t('site'),
        url: url('settings/assets/transforms/' ~ transform.handle),
        handle: transform.handle,
        mode: mode ?? null,
        dimensions: (transform.width ? transform.width : 'Auto'|t('app')|e) ~ " × " ~ (transform.height ? transform.height : 'Auto'|t('app')|e),
        interlace: transform.interlace ? transform.interlace|capitalize : 'None'|t('app')|e,
        format: transform.format ? transform.format|capitalize : 'Auto'|t('app')|e,
    }]) %}
{% endfor %}

{% js %}
var columns = [
    { name: '__slot:title', title: Craft.t('app', 'Name') },
    { name: '__slot:handle', title: Craft.t('app', 'Handle') },
    { name: 'mode', title: Craft.t('app', 'Mode'), },
    { name: 'dimensions', title: Craft.t('app', 'Dimensions'), },
    { name: 'interlace', title: Craft.t('app', 'Interlace'), },
    { name: 'format', title: Craft.t('app', 'Format'), }
];

let config = {
    columns: columns,
    container: '#transforms-vue-admin-table',
    emptyMessage: Craft.t('app', 'No image transforms exist yet.'),
    tableData: {{ tableData|json_encode|raw }},
};

{% if not readOnly %}
    config['deleteAction'] = 'image-transforms/delete';
{% endif %}

new Craft.VueAdminTable(config);
{% endjs %}