{% extends 'formie/_layouts/settings' %}

{% block actionButton %}
    <a href="{{ url('formie/settings/statuses/new') }}" class="btn submit add icon">{{ 'New Status' | t('formie') }}</a>
{% endblock %}

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

{% set tableData = [] %}
{% for status in statuses %}
	{% set tableData = tableData | merge([{
        id: status.id,
        labelHtml: {
            url: status.getCpEditUrl(),
            html: status.labelHtml | raw
        },
        title: status.name | t('formie'),
        url: status.getCpEditUrl(),
        handle: status.handle | e,
        _showDelete: status.canDelete(),
    }]) %}
{% endfor %}

{% js %}
    var columns = [
        {
            name: 'labelHtml',
            title: Craft.t('app', 'Name'),
            callback: function(value) {
                return '<a class="cell-bold" href="' + value.url + '">' + value.html + '</a>';
            }
        },
        { name: '__slot:handle', title: Craft.t('app', 'Handle') }
    ];

    new Craft.VueAdminTable({
        columns: columns,
        container: '#statuses-vue-admin-table',
        deleteAction: 'formie/statuses/delete',
        minItems: 1,
        reorderAction: 'formie/statuses/reorder',
        reorderSuccessMessage: Craft.t('formie', 'Statuses reordered.'),
        reorderFailMessage: Craft.t('formie', 'Couldn’t reorder statuses.'),
        tableData: {{ tableData | json_encode | raw }},
    });
{% endjs %}