[{isys_group name="tom.popup.qcw"}]
<div id="popup-qcw">
    <div class="popup-header-ng">
        <h1>[{isys type="lang" ident="LC__MODULE__QCW__POPUP__HEADER"}] [{isys type="lang" ident="LC__MODULE__QCW__POPUP__HEADER_SUFFIX_CATEGORIES"}]</h1>
        <button type="button" class="btn btn-secondary popup-closer ml-auto" title="[{isys type="lang" ident="LC__POPUP__CLOSE"}]" data-tooltip="1">
            <img alt="close" src="[{$dir_images}]axialis/user-interface/window-control-close.svg" />
        </button>
    </div>

	<div class="popup-content"></div>

	<div class="popup-footer-ng">
		<button type="button" class="btn mr5" data-action="accept">
			<img src="[{$dir_images}]axialis/basic/symbol-ok.svg" /><span>[{isys type="lang" ident="LC_UNIVERSAL__ACCEPT"}]</span>
		</button>
		<button type="button" class="btn popup-closer">
			<img src="[{$dir_images}]axialis/basic/symbol-cancel.svg" /><span>[{isys type="lang" ident="LC_UNIVERSAL__ABORT"}]</span>
		</button>
	</div>
</div>

<script type="text/javascript">
	idoit.Translate.set('LC_UNIVERSAL__ACCEPT', '[{isys type="lang" ident="LC_UNIVERSAL__ACCEPT"}]');
	idoit.Translate.set('LC__UNIVERSAL__SEARCH', '[{isys type="lang" ident="LC__UNIVERSAL__SEARCH"}]');
	idoit.Translate.set('LC__MODULE__QCW__POPUP__DELETE', '[{isys type="lang" ident="LC__MODULE__QCW__POPUP__DELETE" p_bHtmlEncode=false}]');
	idoit.Translate.set('LC__UNIVERSAL__EDIT', '[{isys type="lang" ident="LC__UNIVERSAL__EDIT"}]');
	idoit.Translate.set('LC__UNIVERSAL__TITLE', '[{isys type="lang" ident="LC__UNIVERSAL__TITLE"}]');
	idoit.Translate.set('LC__CMDB__OBJTYPE__CONST', '[{isys type="lang" ident="LC__CMDB__OBJTYPE__CONST"}]');
	idoit.Translate.set('LC__CMDB__OBJTYPE__COLOR', '[{isys type="lang" ident="LC__CMDB__OBJTYPE__COLOR"}]');
	idoit.Translate.set('LC__MODULE__QCW__SHOWN', '[{isys type="lang" ident="LC__MODULE__QCW__POPUP__CATEGORY_SHOW"}]');
	idoit.Translate.set('LC__MODULE__QCW__HIDDEN', '[{isys type="lang" ident="LC__MODULE__QCW__POPUP__CATEGORY_HIDE"}]');
	idoit.Translate.set('LC__MODULE__QCW__POPUP__EDIT_DISABLED', '[{isys type="lang" ident="LC__MODULE__QCW__POPUP__EDIT_DISABLED" p_bHtmlEncode=false}]');
	idoit.Translate.set('LC__MODULE__QCW__POPUP__DELETE_DISABLED', '[{isys type="lang" ident="LC__MODULE__QCW__POPUP__DELETE_DISABLED" p_bHtmlEncode=false}]');
	idoit.Translate.set('LC__MODULE__QCW__POPUP__CREATE', '[{isys type="lang" ident="LC__MODULE__QCW__POPUP__CREATE"}]');
	idoit.Translate.set('LC_UNIVERSAL__ABORT', '[{isys type="lang" ident="LC_UNIVERSAL__ABORT"}]');
	idoit.Translate.set('LC__MODULE__QCW__BUTTON_APPLY', '[{isys type="lang" ident="LC__MODULE__QCW__BUTTON_APPLY"}]');
	idoit.Translate.set('LC__MODULE__QCW__POPUP__CREATE_CATEGORY_DESCRIPTION', '[{isys type="lang" ident="LC__MODULE__QCW__POPUP__CREATE_CATEGORY_DESCRIPTION" p_bHtmlEncode=false}]');
	idoit.Translate.set('LC__MODULE__QCW__POPUP__EDIT_DISABLED_CUSTOM', '[{isys type="lang" ident="LC__MODULE__QCW__POPUP__EDIT_DISABLED_CUSTOM" p_bHtmlEncode=false}]');
	idoit.Translate.set('LC__MODULE__QCW__POPUP__DELETE_DISABLED_CUSTOM', '[{isys type="lang" ident="LC__MODULE__QCW__POPUP__DELETE_DISABLED_CUSTOM" p_bHtmlEncode=false}]');
	idoit.Translate.set('LC__CMDB__CUSTOM_CATEGORIES', '[{isys type="lang" ident="LC__CMDB__CUSTOM_CATEGORIES" p_bHtmlEncode=false}]');

	[{include file="`$assetsDir`js/popup.js"}]

	(function () {
		'use strict';

		try
		{
			var data = JSON.parse('[{$data|escape:"javascript"}]');
		}
		catch (e)
		{
			idoit.Notify.error('Error while encoding JSON: ' + e, {sticky: true});

			popup_close();
		}

		var popup = new QCWCategoryPopup($('popup-qcw'), data, {
			ajaxUrl:          '[{$ajax_url}]',
			context:          '[{$context}]',
			createItemHeader: '[{isys type="lang" ident="LC__MODULE__QCW__POPUP__CREATE_CATEGORY" p_bHtmlEncode=false}]',
			afterRender:      function () {
				// Hide all buttons, we simply display a link to the custom category page here.
				this.$form.select('button,input,select,textarea').invoke('addClassName', 'hide');
				this.$form.down('a').writeAttribute('href', '[{$customCategoryURL}]');

				// Hide this with "hide()" so that the internal handling will not interfere.
				this.$formHider.hide();
			},
			afterSetObserver: function () {
				new idoit.Suggest('category_by_attributes', this.$search, null, {
					parameters:     {disableSpecific: true},
					selectCallback: function ($search, $li) {
						$search.setValue($li.readAttribute('data-category'));

						this.filterItems();
					}.bind(this)
				});
			},
			onPopupAccept: function () {
				$('category_list').fire('list:updated', {
					callback: function () {
						this.currentObjectType = null;
						this.$objTypeList.down('li.active').simulate('click');
					}
				});
			}
		});
	})();
</script>
[{/isys_group}]
