#REM
<!--
  Context: The input here used to be just called 'CategoryName'
  We try to avoid conflicts with input 'id' and 'name' parameters of product type attributes
  e.g. if a merchant creates an attribute called 'CategoryName', there will be an input with id 'CategoryName', name 'UserDefined_CategoryName'
        Picking something esoteric so as to minimise this possibility, we settle on "#Shop.ID_CategoryName_#ObjectID" (where object id is the product id, OR the shop's product folder id if on the new product screen)
        If a merchant wants to create an attribute with that alias to break this part of the page (per product), well, can't stop them . . ., but what are the chances?
        Another alternative of blacklisting the keyword 'CategoryName' from being used as a product type alias? Probably overkill when we have an (almost foolproof) alternative
-->
#ENDREM
#LOCAL("MyUniqueID", #Shop.ID . "_CategoryName_" . #ID)
<div class="row">
    <div class="col-xs-12 BottomWidePadding">
        <h4>{Categories}</h4>
    </div>#REM <!-- .col-xs-12 --> #ENDREM
</div>#REM <!-- .row --> #ENDREM
<div class="row">
    <div class="col-xs-12#IF(#FormError_Category) DialogError#ENDIF">
        <div class="row">
            <div class="col-xs-12 BottomMarginWide">
                <ul id="ep-category-taglist" class="ep-category-taglist BottomPaddingSmall TopPaddingSmall NoMargin"></ul>
                <input type="text" id="#MyUniqueID" class="HideElement ep-js" data-js=".uiInput()" name="#MyUniqueID" value="" maxlength="100" />
                <button type="button" class="ep-tray ep-button ep-button-add-option Bold">{AssignCategories}</button>
            </div>#REM <!-- .col-xs-12 --> #ENDREM
        </div>#REM <!-- .row --> #ENDREM
    </div>#REM <!-- .col-xs-12 --> #ENDREM
</div>#REM <!-- .row --> #ENDREM
<script type="text/javascript">

    require([
        'jquery',
        'underscore',
        'de_epages/presentation/tray/setup',

        '$ready!'
    ], function ($, _, setup) {
        'use strict';

        var initialCategories = [],
            trayButton = $('button.ep-tray'),
            input = $('#' + '#MyUniqueID'),
            trayWidget,
            tmpCollectionGlobal,

            addCategories = function (categoryList, first) {
                var list = $('#ep-category-taglist'),
                    idList = [],
                    li,
                    span,
                    #IF(#DEFINED(#SuperProductCategories))
                    superProductCategories = [],
                    link,
                    #ENDIF
                    btn,
                    i;

                list.empty();
                input.val('');


                #IF(#DEFINED(#SuperProductCategories))
                    superProductCategories = #TO_JSON(#SuperProductCategories);

                    for (i=0; i<superProductCategories.length; i++) {
                        li = $('<li />');
                        link = $('<a />');

                        span = $('<span/>');
                        span
                            .addClass('ep-category-taglist-text TextWeak')
                            .html(superProductCategories[i].CategoryName);

                        link
                            .attr('href', '?ViewAction=UnityMBO-ViewGeneral&ObjectID=#SuperProduct.ID')
                            .append(span);

                        li
                            .attr('title', '{UnityEditOnMaster}')
                            .append(link);

                        list.append(li);
                    }
                #ENDIF

                for (i=0; i<categoryList.length; i++) {
                    li = $('<li />');

                    span = $('<span/>');
                    span
                        .addClass('ep-category-taglist-text')
                        .html(categoryList[i].CategoryName);

                    // delete icon/button
                    btn = $('<i class="fa fa-times" title="{UnassignCategory}" />');
                    btn.data('id', categoryList[i].CategoryID);

                    btn.on('click', function () {
                        var _this = $(this),
                            id = _this.data('id'),
                            idList = input.val().split(','),
                            index = idList.indexOf(String(id));

                        idList.splice(index, 1);
                        input.val(idList.join(","));

                        _this.closest('li').remove();

                        // set checkbox as unchecked for removed category in dialog
                        $("#"+id).prop('checked', false);

                        // save widget data if widget with its model collection is already defined
                        if (trayWidget === undefined) {
                            trayWidget = trayButton.data('uiPresentationUiTray');
                        }

                        // if tray was already initialized
                        if (trayWidget.collection) {
                            // remove models from collection that are unchecked
                            trayWidget.collection.remove(trayWidget.collection.findWhere({ObjectID: Number(id)}));

                            // Write tray collection as deep copy to html global variable
                            tmpCollectionGlobal = trayWidget.collection.clone();

                        } else {
                            // Loop over initialCategories and remove currently clicked element
                            initialCategories = _.reject(initialCategories, function (cat) {
                                return Number(cat.CategoryID) === Number(id);
                            });
                            // set reduced category set as widget option
                            trayButton.presentationUiTray('option', 'assignedCategories', initialCategories);
                        }

                        // change 'saved' button to 'save' button
                        input.trigger('change');
                    });

                    li
                        .attr('title', categoryList[i].CategoryName)
                        .append(span)
                        .append(btn);

                    list.append(li);

                    // IDs
                    idList.push(categoryList[i].CategoryID);
                }

                input.val(idList.join(","));

                if (!first) {
                    input.trigger('change');
                }

            };

        #IF(#DEFINED(#Categories))
            initialCategories = #TO_JSON(#Categories);
            addCategories(initialCategories, true);
        #ENDIF

        setup({
            node: trayButton,
            dialog: {
                title: '{AssignCategories}'
            },
            pageId: #ID,
            changeAction: 'JSONUnityAssignCategories',

            // remember existence of preassigned categories
            assignedCategories: initialCategories,
            savedCategoriesExist: true,
            // hide the tab bar in dialog
            hideTabBar: true,

            tabs: {
                categories: {
                    id: #Shop.Categories.ID,
                    action: 'JSONSearchCategoriesToInsert',
                    objectName: 'CategoryID'
                }
            },

            // add categories after pressing 'apply btn'
            done: function (data) {
                var categoryList = data.Categories;

                addCategories(categoryList);
            },
            empty: function () {
                addCategories([]);
            },
            onBeforeOpen: function (collectionData) {
                var tmpCollection,
                    trayButtonData = $('button.ep-tray').data('uiPresentationUiTray');

                 if (tmpCollectionGlobal) {
                    // uncheck changed checkboxes
                    $('.ep-uiDatatable input[type="checkbox"][name="ObjectID"].ui-changed').prop("checked", false);
                    // recheck checkboxes in tmpCollectionGlobal
                    $(tmpCollectionGlobal.models).each(function (index, item) {
                        $('#'+item.attributes.ObjectID).prop("checked", true);
                    });
                    // write correct collection to tray.view.getCollection()
                    collectionData = tmpCollectionGlobal.clone();
                    // create deep copy and write to dom-data-object
                    tmpCollection = tmpCollectionGlobal.clone();
                    trayButtonData.collection.models = tmpCollection.models;
                    trayButtonData.collection._byId = tmpCollection._byId;
                 } else {
                    // write standard Collection to tmpCollectionGlobal
                    tmpCollectionGlobal = trayButtonData.collection.clone();
                 }
            },
            onBeforeClose: function (collectionData) {
                // write tray.view.collection to tmpCollectionGlobal on "apply"
                tmpCollectionGlobal = collectionData.clone();
            }
        });
    });

</script>
#ENDLOCAL