<div class="ml20 input-group input-size-normal">
    <table class="checkboxes-multiselect-table" id="checkboxesSelection__C__CATG__CUSTOM__[{$key}]" style="border-collapse: collapse;">
        [{foreach $field.p_arData as $ardata_id => $ardata_elem}]
        [{assign var=data_id value=$ardata_elem.id}]
        [{assign var=title value=$ardata_elem.title}]

        [{if in_array($data_id, $field.values)}]
            [{assign var=checked value='checked="checked"'}]
        [{else}]
            [{assign var=checked value=''}]
        [{/if}]

        <tr>
            <td class="checkbox">
                <input type="checkbox" class="C__CATG__CUSTOM__[{$key}]" name="C__CATG__CUSTOM__[{$key}][[{$ardata_id}]]" id="C__CATG__CUSTOM__[{$key}]__[{$ardata_elem.id}]" value="[{$ardata_elem.id}]" [{if !isys_glob_is_edit_mode()}]disabled[{/if}] [{$checked}] />
            </td>
            <td class="label pl5">
                <label for="checkbox__C__CATG__CUSTOM__[{$key}]__[{$ardata_elem.id}]">[{$ardata_elem.title}]</label>
            </td>
        </tr>
        [{/foreach}]
    </table>

    [{if isys_glob_is_edit_mode() && $field.authorizedToEdit}]
    <button type="button" class="C__CATG__CUSTOM__[{$key}] mt5 btn" title="Add new value" onclick="get_popup('dialog_plus','','480','70%',{params:'[{$field.params}]'},null,null,null,null,null);">
        <img src="[{$dir_images}]icons/silk/page_white_stack.png" class="mr5" alt=""><span>Add new value</span>
    </button>
    [{/if}]

    <div class="hide">
        <select id="C__CATG__CUSTOM__[{$key}]" class="input " data-identifier="isys_cmdb_dao_category_g_custom_fields::f_popup_[{$key}]" data-output-type="checkboxes" multiple="multiple">
            [{foreach $field.p_arData as $ardata_id => $ardata_elem}]
            <option value="[{$ardata_elem.id}]" [{if in_array($ardata_elem.id, $field.values)}] selected="selected" [{/if}]>[{$ardata_elem.title}]</option>
            [{/foreach}]
        </select>

        <input type="hidden" name="SM2__C__CATG__CUSTOM__[{$key}][p_strPopupType]" value="checkboxes">
        <input type="hidden" name="SM2__C__CATG__CUSTOM__[{$key}][p_strSelectedID]" id="SM2__C__CATG__CUSTOM__[{$key}]__p_strSelectedID" />
        <input type="hidden" name="SM2__C__CATG__CUSTOM__[{$key}][p_strTable]" value="isys_dialog_plus_custom" />
        <input type="hidden" name="SM2__C__CATG__CUSTOM__[{$key}][multiselect]" value="1" />
        <input type="hidden" name="SM2__C__CATG__CUSTOM__[{$key}][p_arData]" value="">
        <input type="hidden" name="SM2__C__CATG__CUSTOM__[{$key}][p_strValue]" value="">
        <input type="hidden" name="SM2__C__CATG__CUSTOM__[{$key}][type]" value="f_popup">
    </div>

    <script type="text/javascript">
        (function () {
             'use strict';
             var selection = [];
             [{if isys_glob_is_edit_mode()}]
                reloadSmartySelection();
             [{else}]
                document.observe("dom:loaded", function() {
                    reloadSmartySelection()
                });
             [{/if}]

             function reloadSmartySelection() {
                 $$('.C__CATG__CUSTOM__[{$key}]').forEach(function($field) {
                     if ($field.checked) {
                         selection.push($field.value);
                     }
                 });
                 $('SM2__C__CATG__CUSTOM__[{$key}]__p_strSelectedID').value = selection.join(',');
             }
        })();
    </script>
</div>
