<div class="p20" id="qrcode_config">
    <p class="box-blue p10 mb20"><img src="[{$dir_images}]axialis/basic/button-info.svg" class="mr5 vam" />[{isys type="lang" ident="LC__MODULE__QRCODE__CONFIGURATION__GLOBAL_ENABLE"}]</p>

    <p class="my20">[{isys type="lang" ident="LC__MODULE__QRCODE__CONFIGURATION__GLOBAL_CONFIGURATION"}]</p>

    [{if !$auth_edit_global}]
        [{* If the "edit" right is missing, we insert a hidden element as a radio-button fallback *}]
        [{isys type="f_text" name="C__MODULE__QRCODE__GLOBAL_TYPE" p_strValue=$global_type p_bInvisible=true p_bInfoIconSpacer=0}]
        [{isys type="f_text" name="C__MODULE__QRCODE__GLOBAL_LINK_TYPE" p_strValue=$link_type p_bInvisible=true p_bInfoIconSpacer=0}]
    [{/if}]

    <table class="contentTable mt20">
        <tr>
            <td class="key vat pt10">[{isys type="lang" ident="LC__MODULE__QRCODE__CONFIGURATION__QR_METHOD"}]</td>
            <td class="value pt0">
                <table cellspacing="0">
                    <tr>
                        <td class="p5" style="width: 170px;">
                            <label>
                                <input type="radio" value="[{$smarty.const.C__QRCODE__TYPE__SELFDEFINED}]" class="radio ml20 url-switch" name="C__MODULE__QRCODE__GLOBAL_TYPE" />
                                [{isys type="lang" ident="LC__MODULE__QRCODE__CONFIGURATION__GLOBAL_DEFINITION"}]<strong class="text-blue">*</strong>
                            </label>
                        </td>
                        <td>
                            <div class="ml20">
                                [{isys type="f_text" name="C__MODULE__QRCODE__GLOBAL_URL"}]
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class="p5" style="width: 170px;">
                            <label>
                                <input type="radio" value="[{$smarty.const.C__QRCODE__TYPE__ACCESS_URL}]" class="radio ml20 url-switch" name="C__MODULE__QRCODE__GLOBAL_TYPE" />
                                [{isys type="lang" ident="LC__MODULE__QRCODE__CONFIGURATION__PRIMARY_URL"}]
                            </label>
                        </td>
                        <td>
                            <div class="ml20">
                                [{isys type="lang" ident="LC__MODULE__QRCODE__CONFIGURATION__PRIMARY_URL_DESCRIPTION"}]
                            </div>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td class="key vat pt5">[{isys type="lang" ident="LC__MODULE__QRCODE__CONFIGURATION__QR_LINK"}]</td>
            <td class="value pt0">
                <label class="display-block ml20 p5">
                    <input type="radio" value="[{$smarty.const.C__QRCODE__LINK__IQR}]" class="radio" name="C__MODULE__QRCODE__GLOBAL_LINK_TYPE" />
                    [{isys type="lang" ident="LC__MODULE__QRCODE__CONFIGURATION__LINK_IQR"}]
                </label>
                <label class="display-block ml20 p5">
                    <input type="radio" value="[{$smarty.const.C__QRCODE__LINK__PRINT}]" class="radio" name="C__MODULE__QRCODE__GLOBAL_LINK_TYPE" />
                    [{isys type="lang" ident="LC__MODULE__QRCODE__CONFIGURATION__LINK_PRINT"}]
                </label>
            </td>
        </tr>
        <tr>
            <td class="key vat">[{isys type="f_label" name="C__MODULE__QRCODE__CONFIGURATION__GLOBAL_WYSIWYG" ident="LC__MODULE__QRCODE__CONFIGURATION__DESCRIPTION"}]<strong class="text-blue">*</strong></td>
            <td class="value">[{isys type="f_wysiwyg" name="C__MODULE__QRCODE__CONFIGURATION__GLOBAL_WYSIWYG" p_bReadonly=!$auth_edit_global}]</td>
        </tr>
        <tr>
            <td class="key">[{isys type="f_label" name="C__MODULE__QRCODE__CONFIGURATION__GLOBAL_LOGO" ident="LC__MODULE__QRCODE__CONFIGURATION__LOGO"}]</td>
            <td class="value">
                [{isys type="f_popup" p_strPopupType="browser_file" name="C__MODULE__QRCODE__LOGO_OBJ" p_bReadonly=!$auth_edit_global}]
            </td>
        </tr>
        <tr>
            <td></td>
            <td class="value pl20">
                [{if isys_glob_is_edit_mode()}]
                <div class="mt10">
                    <div class="display-flex align-items-center box-blue p5" style="width: 550px">
                        <button id="placeholder-table-toggle" type="button" class="btn btn-secondary mr5" title="[{isys type="lang" ident="LC__UNIVERSAL__TOGGLE_VIEW"}]" data-tooltip="1">
                            <img src="[{$dir_images}]axialis/user-interface/angle-right-small.svg" />
                        </button>
                        <strong><span class="text-blue">*</span> [{isys type="lang" ident="LC__CMDB__LINK_VARIABLE__DESCRIPTION"}]</strong>
                    </div>

                    <div id="placeholder-table" class="border mt20 hide" style="width: 550px">
                        <table class="mainTable">
                            [{foreach $variable_description as $variable => $preview}]
                            <tr>
                                <td class="text-right"><code>[{$variable}]</code></td>
                                <td class="pl20">[{$preview|default:$empty_value}]</td>
                            </tr>
                            [{/foreach}]
                        </table>
                    </div>
                </div>
                [{/if}]
            </td>
        </tr>
    </table>
</div>

<h3 class="p15 bg-neutral-200 border-top border-bottom">[{isys type="lang" ident="LC__MODULE__QRCODE__CONFIGURATION__BY_OBJ_TYPE"}]</h3>

<div class="p20" id="qrcode_obj_type_config">
    [{if isys_glob_is_edit_mode() && $auth_edit_objtype}]
    <div class="mb20">
        [{isys type="f_dialog" name="C__MODULE__QRCODE__OBJ_TYPES"}]

        <button type="button" id="qrcode_obj_type_add" class="btn ml5">
            <img src="[{$dir_images}]axialis/basic/symbol-add.svg" class="mr5" /><span>[{isys type="lang" ident="LC__MODULE__QRCODE__CONFIGURATION__NEW_CONFIG"}]</span>
        </button>
    </div>
    [{/if}]

    <div id="qrcode_obj_type_config_items">
        [{foreach $obj_type_config as $obj_type => $config}]

            [{if !$auth_edit_objtype}]
                [{* If the "edit" right is missing, we insert a hidden element as a radio-button fallback *}]
                [{isys type="f_text" name="C__MODULE__QRCODE__[{$obj_type}]_TYPE" p_strValue=$config.type_selection p_bInvisible=true p_bInfoIconSpacer=0}]
            [{/if}]

        <div class="item border mb15" data-obj-type="[{$obj_type}]">
            <div class="toggle-header bg-neutral-200 border-bottom">
                <button type="button" class="btn btn-secondary toggle mr5" title="[{isys type="lang" ident="LC__UNIVERSAL__TOGGLE_VIEW"}]" data-tooltip="1">
                    <img src="[{$dir_images}]axialis/user-interface/angle-down-small.svg" />
                </button>
                <h2>[{$config.obj_type_name}]</h2>
                [{if isys_glob_is_edit_mode() && $auth_delete_objtype}]
                <button type="button" class="btn ml-auto remove" title="[{isys type="lang" ident="LC_UNIVERSAL__DELETE"}]" data-tooltip="1">
                    <img src="[{$dir_images}]axialis/industry-manufacturing/waste-bin.svg" />
                </button>
                [{/if}]
            </div>

            <table class="contentTable m10">
                <tr>
                    <td class="key" style="width:200px;">[{isys type="f_label" name="C__MODULE__QRCODE__ENABLE__`$obj_type`" ident="LC__MODULE__QRCODE__CONFIGURATION__ENABLE"}]</td>
                    <td class="value">[{isys type="f_dialog" name="C__MODULE__QRCODE__ENABLE__`$obj_type`" p_bDbFieldNN=1 p_arData=$smarty_yes_no p_strClass="input-mini qr-code-disabler" p_strSelectedID=$config.enabled}]</td>
                </tr>
                <tr [{if $config.enabled == 0}]style="display:none;"[{/if}]>
                    <td class="key vat">[{isys type="lang" ident="LC__MODULE__QRCODE__CONFIGURATION__QR_METHOD"}]</td>
                    <td class="value pt0">
                        <table>
                            <tr>
                                <td class="p5" style="width: 170px;">
                                    <label>
                                        <input type="radio" value="[{$smarty.const.C__QRCODE__TYPE__SELFDEFINED}]" class="radio ml20 url-switch" name="C__MODULE__QRCODE__[{$obj_type}]_TYPE" [{$config.type_selfdefined}] />
                                        [{isys type="lang" ident="LC__MODULE__QRCODE__CONFIGURATION__GLOBAL_DEFINITION"}] <strong class="text-blue">*</strong>
                                    </label>
                                </td>
                                <td>
                                    <div class="ml20">
                                        [{isys type="f_text" name=$config.url p_bInfoIconSpacer=0}]
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td class="p5" style="width: 170px;">
                                    <label>
                                        <input type="radio" value="[{$smarty.const.C__QRCODE__TYPE__ACCESS_URL}]" class="radio ml20 url-switch" name="C__MODULE__QRCODE__[{$obj_type}]_TYPE" [{$config.type_accessurl}] />
                                        [{isys type="lang" ident="LC__MODULE__QRCODE__CONFIGURATION__PRIMARY_URL"}]
                                    </label>
                                </td>
                                <td>
                                    <div class="ml20">
                                        [{isys type="lang" ident="LC__MODULE__QRCODE__CONFIGURATION__PRIMARY_URL_DESCRIPTION"}]
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr [{if $config.enabled == 0}]style="display:none;"[{/if}]>
                    <td class="key vat">
                        [{isys type="f_label" name=$config.description ident="LC__MODULE__QRCODE__CONFIGURATION__DESCRIPTION"}]<strong class="text-blue">*</strong>
                    </td>
                    <td class="value wysiwyg">
                        [{isys type="f_wysiwyg" name=$config.description p_bReadonly=!$auth_edit_objtype}]
                    </td>
                </tr>
            </table>
        </div>
        [{foreachelse}]
        <p class="no-config-message text-blue">[{isys type="lang" ident="LC__MODULE__QRCODE__CONFIGURATION__NO_OBJTYPE_CONFIG"}]</p>
        [{/foreach}]
    </div>
</div>

<div id="qrcode_obj_type_config_template" class="hide">

	<!-- This will serve as our template, when creating a new object-type specific configuration -->
	<div class="item border mb15" data-obj-type="%s">
        <div class="toggle-header bg-neutral-200 border-bottom">
			<button type="button" class="btn btn-secondary toggle mr5" title="[{isys type="lang" ident="LC__UNIVERSAL__TOGGLE_VIEW"}]" data-tooltip="1">
                <img src="[{$dir_images}]axialis/user-interface/angle-down-small.svg" />
            </button>
			<h2>%type</h2>
			<button type="button" class="btn ml-auto remove" title="[{isys type="lang" ident="LC_UNIVERSAL__DELETE"}]" data-tooltip="1">
                <img src="[{$dir_images}]axialis/industry-manufacturing/waste-bin.svg" />
            </button>
        </div>
		<table class="contentTable m10">
			<tr>
				<td class="key" style="width: 200px;">[{isys type="f_label" name="C__MODULE__QRCODE__ENABLE__%s" ident="LC__MODULE__QRCODE__CONFIGURATION__ENABLE"}]</td>
				<td class="value">[{isys type="f_dialog" name="C__MODULE__QRCODE__ENABLE__%s" p_bDbFieldNN=1 p_arData=$smarty_yes_no p_strClass="input-mini qr-code-disabler"}]</td>
			</tr>
			<tr>
				<td class="key vat">[{isys type="lang" ident="LC__MODULE__QRCODE__CONFIGURATION__QR_METHOD"}]</td>
				<td class="value pt0">
					<table>
						<tr>
							<td class="p5" style="width: 170px;">
								<label>
									<input type="radio" value="[{$smarty.const.C__QRCODE__TYPE__SELFDEFINED}]" class="radio ml20 url-switch" name="C__MODULE__QRCODE__%s_TYPE" />
									[{isys type="lang" ident="LC__MODULE__QRCODE__CONFIGURATION__GLOBAL_DEFINITION"}] <strong class="text-blue">*</strong>
								</label>
							</td>
							<td>
								<div class="ml20">
									[{isys type="f_text" name="C__MODULE__QRCODE__%s_URL" p_bInfoIconSpacer=0 p_strValue="%idoit_host%/?objID=%objid%"}]
								</div>
							</td>
						</tr>
						<tr>
							<td class="p5" style="width: 170px;">
								<label>
									<input type="radio" value="[{$smarty.const.C__QRCODE__TYPE__ACCESS_URL}]" class="radio ml20 url-switch" name="C__MODULE__QRCODE__%s_TYPE" checked="checked" />
									[{isys type="lang" ident="LC__MODULE__QRCODE__CONFIGURATION__PRIMARY_URL"}]
								</label>
							</td>
							<td>
								<div class="ml20">
									[{isys type="lang" ident="LC__MODULE__QRCODE__CONFIGURATION__PRIMARY_URL_DESCRIPTION"}]
								</div>
							</td>
						</tr>
					</table>
				</td>
			</tr>
			<tr>
				<td class="key vat">
					[{isys type="f_label" name="C__MODULE__QRCODE__WYSIWYG__%s" ident="LC__MODULE__QRCODE__CONFIGURATION__DESCRIPTION"}]<strong class="text-blue">*</strong>
				</td>
				<td class="value wysiwyg">

				</td>
			</tr>
		</table>
	</div>

</div>

<style>
    #qrcode_obj_type_config_items .toggle-header {
        padding: 5px;
        display: flex;
        align-items: center;
    }
</style>

<script type="text/javascript">
	var $gui = $('qrcode_config'),
		$obj_type_config = $('qrcode_obj_type_config'),
		$obj_type_config_items = $('qrcode_obj_type_config_items'),
		$obj_types = $('C__MODULE__QRCODE__OBJ_TYPES');

    const $placeholderTable = $('placeholder-table');
    const $placeholderTableToggle = $('placeholder-table-toggle');

    if ($placeholderTable && $placeholderTableToggle) {
        $placeholderTableToggle.on('click', function () {
            $placeholderTable.toggleClassName('hide');

            if ($placeholderTable.hasClassName('hide')) {
                $placeholderTableToggle.down('img').writeAttribute('src', '[{$dir_images}]axialis/user-interface/angle-right-small.svg');
            } else {
                $placeholderTableToggle.down('img').writeAttribute('src', '[{$dir_images}]axialis/user-interface/angle-down-small.svg');
            }
        });
    }

	$obj_type_config_items.on('click', 'button.toggle', function(ev) {
		const $button = ev.findElement('button.toggle');
		const $item = $button.up('div.item');
		const $table = $item.down('table');

        $table.toggleClassName('hide');

		if ($table.hasClassName('hide')) {
            $button.up('.toggle-header').removeClassName('border-bottom');

            $button.down('img').writeAttribute('src', '[{$dir_images}]axialis/user-interface/angle-right-small.svg');
		} else {
            $button.up('.toggle-header').addClassName('border-bottom');

            $button.down('img').writeAttribute('src', '[{$dir_images}]axialis/user-interface/angle-down-small.svg');
		}
	});

	[{if isys_glob_is_edit_mode()}]
		var change_qrcode_type = function () {
			var default_url = $('C__MODULE__QRCODE__GLOBAL_URL');

			if (default_url) {
				if (this.getValue() == '[{$smarty.const.C__QRCODE__TYPE__SELFDEFINED}]') {
					default_url.enable().setStyle({background: '#fff'});
				} else {
					default_url.disable().setStyle({background: '#eee'});
				}
			}
		};

		$gui.select('.radio.url-switch').invoke('observe', 'change', change_qrcode_type);

		$obj_type_config.on('change', '.qr-code-disabler', function (ev) {
			var $select = ev.findElement('select');

			if ($select.getValue() == 0) {
				$select.up('tr')
					.next('tr').hide()
					.next('tr').hide();
			} else {
				$select.up('tr')
					.next('tr').show()
					.next('tr').show();
			}
		});

		if ($('qrcode_obj_type_add')) {
			$('qrcode_obj_type_add').on('click', function () {
				var obj_type = $obj_types.getValue(),
					obj_type_name = $obj_types.down('option:selected').innerHTML,
					obj_type_config = $obj_type_config_items.select('.item[data-obj-type="' + obj_type + '"]'),
					config,
					item;

				if (obj_type_config.length == 0) {
					new Ajax.Request('?ajax=1&call=smartyplugin&mode=edit', {
						method: 'post',
						parameters:{
							plugin_name:'f_wysiwyg',
							parameters:Object.toJSON({name:'C__MODULE__QRCODE__WYSIWYG__' + obj_type})
						},
						onSuccess: function (response) {
							var json = response.responseJSON;

							if (json.success) {
								// Some sort of templating, here...
								item = $('qrcode_obj_type_config_template').clone(true);
								item.down('td.wysiwyg').update(json.data);
								item = item.innerHTML.replace(new RegExp('%s', 'g'), obj_type).replace(new RegExp('%type', 'g'), obj_type_name);

								$obj_type_config_items.insert(item);

                                if ($obj_type_config_items.down('p.no-config-message')) {
                                    $obj_type_config_items.down('p.no-config-message').addClassName('hide');
                                }
							}

                            $('body').fire('update:tooltips');
						}
					});
				} else {
					obj_type_config[0].highlight();
				}
			});
		}

		$obj_type_config_items.on('click', 'button.remove', function(ev) {
			ev.findElement().up('div.item').remove();

            if ($obj_type_config_items.select('.item').length === 0) {
                $obj_type_config_items.down('p.no-config-message').removeClassName('hide');
            }
		});

		[{if !$auth_edit_global}]
		$gui.select('input.radio').invoke('disable');
		[{/if}]

		[{if !$auth_edit_objtype}]
		$obj_type_config.select('input.radio').invoke('disable');
		$obj_type_config.select('input.input').invoke('writeAttribute', 'readonly', 'readonly');
		[{/if}]

	[{else}]
		$gui.select('input.radio').invoke('disable');
		$obj_type_config.select('h3.toggle').invoke('simulate', 'click');
	[{/if}]

	$gui.down('input.radio[value=[{$global_type}]]')
		.writeAttribute('checked', 'checked')
		.simulate('change');

	$gui.down('input.radio[value=[{$link_type}]]')
	    .writeAttribute('checked', 'checked')
	    .simulate('change');
</script>

<script type="text/javascript" src="[{$dir_tools}]js/ajax_upload/fileuploader.js"></script>
