{% include "popups/headitem.html.twig" with {title: "GENERAL_ADMIN_TITLE"|translate} %}

{% set oxajax = oAjaxView.getColumns() %}

<script type="text/javascript">
    initAoc = function()
    {
        try {
            YAHOO.oxid.container1 = new YAHOO.oxid.aoc(
                'container1',
                [
                    {% for iKey, aItem in oxajax.container1 %}
                    {{ sSep }}{% apply spaceless %}
                    {
                        key: '_{{ iKey }}',
                        ident: {% if aItem.4 %}true{% else %}false{% endif %}
                        {% if not aItem.4 %},
                        label: '{{ translate({ ident: "GENERAL_AJAX_SORT_"|cat(aItem.0)|upper }) }}',
                        visible: {% if aItem.2 %}true{% else %}false{% endif %}
                        {% endif %}
                    }
                    {% endapply %}
                    {% set sSep = "," %}
                    {% endfor %}
                ],
                '{{ oViewConf.getAjaxLink()|raw }}cmpid=container1&container={{ oAjaxView.getContainerKey() }}&synchoxid={{ oxid }}'
            );

            {% set sSep = "" %}

            YAHOO.oxid.container2 = new YAHOO.oxid.aoc(
                'container2',
                [
                    {% for iKey, aItem in oxajax.container2 %}
                        {{ sSep }}{% apply spaceless %}
                        {
                            key:'_{{ iKey }}',
                            ident: {% if aItem.4 %}true{% else %}false{% endif %}
                            {% if not aItem.4 %},
                                label: '{{ translate({ ident: "GENERAL_AJAX_SORT_"|cat(aItem.0)|upper }) }}',
                                visible: {% if aItem.2 %}true{% else %}false{% endif %},
                                formatter: YAHOO.oxid.aoc.custFormatter
                            {% endif %}}
                        {% endapply %}
                        {% set sSep = "," %}
                    {% endfor %}
                ],
                '{{ oViewConf.getAjaxLink()|raw }}cmpid=container2&container={{ oAjaxView.getContainerKey() }}&oxid={{ oxid }}'
            );

            YAHOO.oxid.container1.getDropAction = function()
            {
                return 'fnc=addAttributeObject';
            }

            YAHOO.oxid.container2.getDropAction = function()
            {
                return 'fnc=removeAttributeObject';
            }
        } catch (ex) {
            console.log(ex);
        }
    }
    $E.onDOMReady( initAoc );
</script>

    <table style="width: 100%">
        <colgroup>
            <col span="2" style="width: 50%" />
        </colgroup>
        <tr class="edittext">
            <td colspan="2">{{ translate({ ident: "GENERAL_AJAX_DESCRIPTION" }) }}<br>{{ translate({ ident: "GENERAL_FILTERING" }) }}<br /><br /></td>
        </tr>
        <tr class="edittext">
            <td style="text-align: center"><b>{{ translate({ ident: oAjaxView.getLeftColumnTitle() }) }}</b></td>
            <td style="text-align: center"><b>{{ translate({ ident: oAjaxView.getRightColumnTitle() }) }}</b></td>
        </tr>
        <tr>
            <td style="vertical-align: top" id="container1"></td>
            <td style="vertical-align: top" id="container2"></td>
        </tr>
        <tr>
            <td class="oxid-aoc-actions"><input type="button" value="{{ translate({ ident: "GENERAL_AJAX_ASSIGNALL" }) }}" id="container1_btn"></td>
            <td class="oxid-aoc-actions"><input type="button" value="{{ translate({ ident: "GENERAL_AJAX_UNASSIGNALL" }) }}" id="container2_btn"></td>
        </tr>
    </table>

</body>
</html>