{strip}
{if $tabConfig === ''}
	<link rel="stylesheet" href="{$CSS_PAGES}adm_config.css"/>
	<div id="tabConfig" class="tabs">
		<ul>
			<li class="tab-config-common">
				<a class="menutabs" href="/administration.php?admin=configuration&tabConfig=common">
					{$lang.ADM_CONF_TAB_COMMON}
				</a>
			</li>
			<li class="tab-config-ldap">
				<a class="menutabs" href="/administration.php?admin=configuration&tabConfig=ldap">
					{$lang.ADM_CONF_TAB_LDAP}
				</a>
			</li>
		</ul>
	</div>
	<script type="text/javascript">
		{literal}
			Utils.setTabs('#tabConfig', 'admConfig');
		{/literal}
	</script>
{else}
{* Required for tabs errors because they are called in ajax *}
<script defer type="text/javascript">
	{if !empty($ERRORS)}
		var errors = {$ERRORS|json_encode};
		{literal}
			errors = errors.map(x => x.message);
			Utils.displayUserMessage(errors, true, 'admMessages');
		{/literal}
	{elseif !empty($ADM_MESSAGE)}
		var success = {$ADM_MESSAGE|json_encode};
		{literal}
			success = success.map(x => x.message);
			Utils.displayUserMessage(success, false, 'admMessages');
		{/literal}
	{/if}
</script>
{if $tabConfig === 'common'}
	{if isset($config_success)}
		<p class="EventOK">{$config_success}</p>
	{/if}
	<script type="text/javascript">
	{literal}
		function showpassword(idhtml)
		{
			if($("#"+idhtml).attr("type") == 'password')
			{
				$("#"+idhtml).attr("type",'text');
				$("#"+idhtml+'_button').removeClass('showPassword');
				$("#"+idhtml+'_button').addClass('hidePassword');
			}
			else
			{
				$("#"+idhtml+'_button').addClass('showPassword');
				$("#"+idhtml).attr("type",'password');
			}
		}
		function resetTemplate(btn)
		{
			btn = $(btn);
			btn.css('cursor', 'wait');
			$.ajax({
				type: 'GET',
				url: './administration.php',
				data: { admin: 'configuration', tabConfig: 'common', action: 'getDefaultMailTpl' },
				dataType: 'json',
			})
			.done(data => {
				if(data && data.length > 0)
				{
					btn.siblings('textarea').fadeOut(100, function() {
						$(this).val(data).fadeIn(300);
					});
				}
			}).always(function() {
				btn.css('cursor', '');
			});
		}
	{/literal}
	</script>
	<div class="tableview">
		<form method="post" action="./administration.php?admin=configuration&tabConfig={$tabConfig}&action=treatconfig" enctype="multipart/form-data">
			<div class="tableview_title">
				<style>
					input[type="button"].showPassword 
					{
						width: 80px;
						background: url("/theme/default/images/eye_show.png") no-repeat center #d4d4d4;
					}
					input[type="button"].hidePassword
					{
						width: 80px;
						background: url("/theme/default/images/eye_hide.png") no-repeat center #d4d4d4;
					}
				</style>
				<h1>{$tabConfigTitle}</h1>
				{esia_pager
					divid="pager_keytable" 
					tablesorterid="keytable" 
					divcss="pager" 
					height="22px"
					ulclass="triList" 
					liclass="triElement"
					langprint="{$lang.ADM_PRINT_BOARD}"
					langcolumn="{$lang.ADM_SHOW_HIDDEN_COLUMN}"
					icn_printer="/theme/default/images/table-print.jpg"
					icn_column="/theme/default/images/table-change-order.jpg"
					icn_columnselect="/theme/default/images/table-change-order.jpg"
				}
				{/esia_pager}
			</div>
			<table class="tab" id="keytable">
				<thead>
					<th class="leftAlign">{$lang.ADM_CONFIGURATION_NAME}</th>
					<th class="leftAlign columnSelector-false">{$lang.SERVICE_TECHNICAL_NAME}</th>
					<th class="leftAlign">{$lang.ADM_CONFIGURATION_VALUE}</th>
					<th class="leftAlign">{$lang.ADM_CONFIGURATION_DESCRIPTION}</th>
				</thead>
				<tbody>
				{foreach name=outer item=line from=$adm_key}
					<tr class="adm-line">
						{assign var="cle" value="ADM_{$line.key}"}
						{if array_key_exists($cle,$lang)} 
							<td class="adm-line-label">{$lang[{$cle}]}</td>
						{else}
							<td class="adm-line-label">{$line.key}</td>
						{/if}
						<td class="adm-line-label">{$line.key}</td>
						<td class="adm-line-input">
						{if $line.type == 'smallint'}
							<input type="number" name="{$line.key}" value="{$line.value}" min="0" max="255" step="1" />
						{elseif $line.type == 'integer'}
							<input type="number" name="{$line.key}" value="{$line.value}" step="1" />
						{elseif $line.type == 'integer_unsigned'}
							<input type="number" name="{$line.key}" value="{$line.value}" min="0" step="1" />
						{elseif $line.type == 'hour'}
							<input type="number" name="{$line.key}" value="{$line.value}" min="0" max="23" step="1" />
						{elseif $line.type == 'file'}
							<input type="file" name="{$line.key}" value="" />
						{elseif $line.type == 'color'}
							<input type="color" name="{$line.key}" value="{$line.value}" />
						{elseif $line.type == 'timezone'}
							{eui_forms_selectTimezone name=$line.key id=$line.key selected=$line.value}
						{elseif $line.type == 'lang'}
							{eui_forms_selectLang name=$line.key id=$line.key selected=$line.value}
						{elseif $line.type == 'text'}
							<textarea name="{$line.key}" cols="60" rows="20">{$line.value|escape:html}</textarea>
							{if $line.key eq 'MAIL_FORMAT_MESSAGE'}
								<button class="btnBack admResetMailTpl" title="{$lang.ADM_MAIL_DEFAULT_TPL_BUTTON_INFO}" onclick="resetTemplate(this);return false;">
								{$lang.ADM_MAIL_DEFAULT_TPL_BUTTON}
								</button>
							{/if}
						{elseif $line.type == 'user_key'}
							<input type="password" id="{$line.key}" name="{$line.key}" value="{$line.value}" />
							<input type="button" id="{$line.key}_button" class="showPassword" value="" onclick="showpassword('{$line.key}');" />
						{else}
							<input type="text" name="{$line.key}" value="{$line.value|escape:html}" size="60" />
						{/if}
						</td>
						<td class="adm-line-desc"><p>{$line.description}</p></td>
					</tr>
				{/foreach}
				</tbody>
			</table>
			<script type="text/javascript">
			{literal}  
				$(document).ready(function()
				{ 
					Utils.createTable("#keytable");
					$("#keytable").tablesorterPager({
						container: $("#pager_keytable"),
						output: '{startRow} to {endRow} ({filteredRows})',
						size: 100,
					});
					$('#keytable').data("tablesorter").widgets.push('print');
					$('#keytable').data("tablesorter").widgets.push('columnSelector');
					$('#keytable').data("tablesorter").widgetOptions['columnSelector_container']=$('#keytable_columnSelector');

					$('#keytable_print').on('click', function() {
						$('#keytable').trigger('printTable');
					});
				});
			{/literal}
			</script>
			<div class="bottomActions">
				<a class="btn_img btnBack admConfigAction" href="./administration.php?admin=configuration&tabConfig={$tabConfig}&action=sendmailtest">{$lang.ADM_CONFIGURATION_SEND_TEST_MAIL}</a>
				<input class="admConfigAction" type="submit" value="{$lang.MODIF}" />
			</div>
		</form>
	</div>
{elseif $tabConfig === 'ldap'}
	<script type="text/javascript">
		{literal}
			function onClickAddTableRow(btn, idTable)
			{
				const body = $(idTable + ' tbody');
				// Clone the last table row to keep all classes & data set
				const newRow = body.find('tr:last-child').clone();
				// Get row index
				let rowIndex = newRow.attr('data-index') || 0;
				rowIndex = parseInt(rowIndex) + 1;
				newRow.attr('data-index', rowIndex);

				// Empty all td inputs of the new row and add it at the end of the table
				newRow.find('input').each(function() {
					this.value = '';
					// Change attr name html array index (LDAP_MEMBER_GROUPS_MATCH[0][match] become LDAP_MEMBER_GROUPS_MATCH[1][match])
					let attrName = $(this).attr('name').replace(/\[\d\]/, '[' + rowIndex + ']');
					$(this).attr('name', attrName);
				});
				newRow.find('.ss-main').each(function() {
					// Remove slimselect elements
					$(this).remove();
				});
				newRow.find('select').each(function() {
					this.selectedIndex = 0;
					let attrName = $(this).attr('name').replace(/\[\d\]/, '[' + rowIndex + ']');
					$(this).attr('name', attrName);

					$(this).css('display', '').removeAttr('data-id'); // Clean previous slimselect adds
					// Add new slimselect element
					new SlimSelect({
						select: this,
						settings: { showSearch: true },
					});
				});
				
				body.append(newRow);
			}

			function onClickDeleteTableRow(btn)
			{
				$(btn).closest('tr').remove();
			}

			function onSubmitFormLdapConf(form)
			{
				let settings = Utils.convertFormToAjaxSettings(form);

				$.ajax({
					...settings,
					dataType: 'json',
				}).done(function(data) {
					if(data?.error)
					{
						Utils.displayUserMessage(data.error, true, 'admMessages');
					}
					else
					{
						Utils.displayUserMessage(data.success || 'Success !', false, 'admMessages');
						Utils.reload_active_tabs('#tabConfig');
					}
				});
			}

			$(document).ready(function()
			{
				$('.inputLdapEsiaGrpSelect').each(function() {
					new SlimSelect({
						select: this,
						settings: { showSearch: true },
					});
				});

				Utils.setFormClientValidation($('#formConfigLdap'));
			});
		{/literal}
	</script>
	<form class="tableview" id="formConfigLdap" method="post" action="./administration.php?admin=configuration&tabConfig={$tabConfig}&action=update" enctype="multipart/form-data" onsubmit="onSubmitFormLdapConf(this); return false;">
		<div class="tableview_title">
			<h1>{$tabConfigTitle}</h1>
		</div>
		<fieldset class="admConfItems">
			<div class="confElt">
				<div class="confElt-col">
					<label for="{$configList.LDAP_HOST_URI.key}" title="{$configList.LDAP_HOST_URI.key}">{$lang.ADM_LDAP_HOST_URI}</label>
					<input type="url" id="{$configList.LDAP_HOST_URI.key}" name="{$configList.LDAP_HOST_URI.key}" value="{$configList.LDAP_HOST_URI.value}" placeholder="ldap://" pattern="ldap://.*" required="required">
				</div>
				<span class="info">{$configList.LDAP_HOST_URI.description}</span>
			</div>
			<div class="confElt">
				<div class="confElt-col">
					<label for="{$configList.LDAP_BASEDN.key}" title="{$configList.LDAP_BASEDN.key}">{$lang.ADM_LDAP_BASEDN}</label>
					<input type="text" id="{$configList.LDAP_BASEDN.key}" name="{$configList.LDAP_BASEDN.key}" value="{$configList.LDAP_BASEDN.value}" placeholder="dc=esia, dc=com">
				</div>
				<span class="info">{$configList.LDAP_BASEDN.description}</span>
			</div>
			<div class="confElt confElt-grpTab">
				<div class="confElt-col">
					<span>{$lang.ADM_LDAP_MEMBER_GROUPS_MATCH}</span>
					<div class="confTabContainer">
						<div class="confTabContainer-overflow">
							<table id="confLdapGrpTable" class="tab">
								<thead>
									<th class="leftAlign">{$lang.ADM_LDAP_MEMBER_ESIA_GROUPS}</th>
									<th class="leftAlign">{$lang.ADM_LDAP_MEMBER_ATTRIBUTE}</th>
									<th class="leftAlign">{$lang.ADM_LDAP_MEMBER_MATCH}</th>
									<th class="leftAlign removeCell">{$lang.ACTION}</th>
								</thead>
								<tbody>
								{foreach from=$groupConfList key=confGrpIndex item=confGrp}
									<tr data-index="{$confGrpIndex}">
										<td>
											<select class="inputLdapEsiaGrpSelect" name="LDAP_MEMBER_GROUPS_MATCH[{$confGrpIndex}][esia_groups]">
												{foreach from=$esiaGrpList item=esiaGrp}
													<option value="{$esiaGrp.id}" {if $esiaGrp.id == $confGrp.esia_groups} selected="selected"{/if}>{$esiaGrp.name}</option>
												{/foreach}
											</select>
										</td>
										<td>
											<input class="inputLdapMemberof" type="text" name="LDAP_MEMBER_GROUPS_MATCH[{$confGrpIndex}][attribute]" value="{$confGrp.attribute}" placeholder="memberof">
										</td>
										<td>
											<input class="inputLdapMatch" type="text" name="LDAP_MEMBER_GROUPS_MATCH[{$confGrpIndex}][match]" value="{$confGrp.match}" placeholder="cn=test">
										</td>
										<td class="removeCell">
											<button type="button" title="{$lang.DELETE_ROW}" onclick="onClickDeleteTableRow(this); return false;">
												<img src="/theme/default/images/esia_delete_button.png" alt="{$lang.DELETE}">
											</button>
										</td>
									</tr>
								{/foreach}
								</tbody>
							</table>
						</div>
						<button type="button" id="confLdapGrpTableAddRow" title="{$lang.ADD_ROW}" onclick="onClickAddTableRow(this, '#confLdapGrpTable'); return false;">{$lang.ADD}</button>
					</div>
				</div>
				<span class="info confElt-tabInfo">{$configList.LDAP_MEMBER_GROUPS_MATCH.description}</span>
			</div>
		</fieldset>
		<div class="bottomActions">
			<input type="submit" class="admConfigAction" value="{$lang.MODIF}"/>
		</div>
	</form>
{/if}
{/if}
{/strip}