<div class="p10" id="attribute-visibility-config">
    <div class="pb20 mb20">
        [{isys type="f_dialog" p_strClass="input-small" name="C__ATTRIBUTE_VISIBILITY__CATEGORIES" chosen=true p_bInfoIconSpacer=0}]

        <button type="button" id="add-configuration" class="ml20 btn fl">
            <img src="[{$dir_images}]axialis/basic/symbol-add.svg" alt="" /><span>[{isys type="lang" ident="LC__ATTRIBUTE_VISIBILITY__ADD_CONFIGURATION"}]</span>
        </button>
    </div>

    [{if count($configuredCategories) === 0 && !isys_glob_is_edit_mode()}]
        <p class="text-blue m10">
            <img src="[{$dir_images}]axialis/basic/button-info.svg" alt="" class="mr5 vam" /><span class="vam">[{isys type="lang" ident="LC__UNIVERSAL__CHOOSEN_EMPTY"}]</span>
        </p>
    [{/if}]

    <div id="category-list"></div>
</div>

<style type="text/css">
    [{include file="./config.css"}]
</style>

<script type="text/javascript">
    const $editMode = $('navMode').value == [{$smarty.const.C__NAVMODE__EDIT}];

    if (!$editMode) {
        $('attribute-visibility-config').down('div').hide();
    }

    [{include file="./config.js"}]

    if ($('add-configuration')) {
        $('add-configuration').on('click', () => addConfig($('C__ATTRIBUTE_VISIBILITY__CATEGORIES').value));
    }

    // Finally we load the configured validation rules.
    [{foreach $configuredCategories as $categoryConstant => $category}]
        addConfiguration('[{$categoryConstant}]', JSON.parse('[{$category|json_encode|escape:"javascript"}]'));
    [{/foreach}]
</script>
