{extends file="layout.html"}
{block name=title}LMS: {$layout.pagetitle|striphtml}{/block}
{block name=module_content}
<!--// $Id$ //-->
<h1>{$layout.pagetitle}</h1>

<style>

	.lmsbox thead td:last-child {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	#configedit-lmsbox thead tr:nth-child(n+1) {
		border-top: 0;
	}

	.config-var-suggestion {
		z-index: 9999 !important;
	}

	.documentation-label {
		text-decoration: underline;
	}

	#documentation p {
		max-width: 60em;
	}

	.lms-ui-button-clipboard {
		margin-left: 0.3em;
	}

</style>

<form method="POST" id="configedit" action="?m=configedit&id={$config.id}" name="config">
<input type="submit" class="hiddenbtn">
<input type="hidden" name="config[reftype]" value="{$reftype}">
<input type="hidden" name="config[refconfigid]" value="{$refconfigid}">

	<table class="lmsbox" id="configedit-lmsbox">
		<colgroup>
			<col style="width: 100%;">
		</colgroup>
		<thead>
			<tr style="background-color: #B6A688;">
				<td class="bold" style="border-bottom: 1px solid black;">
					{if empty($reftype)}
						#1 {trans('Global configuration variable parameters')}
					{else}
						{if $reftype == 'division'}
							#1 {trans('Division configuration variable parameters')}
						{elseif $reftype == 'divisionuser'}
							{trans('User in division configuration variable parameters')}
						{else}
							{trans('User configuration variable parameters')}
						{/if}
					{/if}
				</td>
			</tr>
			<tr>
				<td>
					<table>
						<colgroup>
							<col style="width: 1%;">
							<col style="width: 1%;">
							<col style="width: 98%;">
						</colgroup>
						<tbody>
							{if !empty($reftype)}
								{if $reftype == 'division' || $reftype == 'divisionuser'}
								<tr>
									<td>
										{icon name="division"}
									</td>
									<td class="nobr bold">
										{trans("Division")}
									</td>
									<td>
										<strong>{$divisioninfo.shortname|escape}</strong>
										<input type="hidden" name="config[divisionid]" value="{$config.divisionid}">
									</td>
								</tr>
								{/if}
								{if $reftype == 'divisionuser' || $reftype == 'user'}
									<tr>
										<td>
											{icon name="user"}
										</td>
										<td class="nobr bold">
											{trans("User")}
										</td>
										<td>
											<strong>{$userinfo.rname} ({$userinfo.login})</strong>
											<input type="hidden" name="config[userid]" value="{$config.userid}">
										</td>
									</tr>
								{/if}
							{/if}
							<tr>
								<td>
									{icon name="configuration"}
								</td>
								<td class="bold"width="1%">
									{trans("Section:")}
								</td>
								<td>
									{if empty($reftype)}
									<select size="1" name="config[section]" {tip class="lms-ui-combobox" text="Select section" trigger="section"}
											{if !in_array($config.section, $sections)} data-value="{$config.section}"{/if}>
										{foreach $sections as $section}
											<option value="{$section}"{if $config.section == $section} selected{/if}>{$section}</option>
										{/foreach}
									</select>
									{else}
										<strong>{$config.section}</strong>
										<input type="hidden" name="config[section]" value="{$config.section}">
									{/if}&nbsp;
								</td>
							</tr>
							<tr>
								<td>
									{icon name="service"}
								</td>
								<td class="bold"width="1%">
									{trans("Name:")}
								</td>
								<td>
									{if empty($reftype)}
									<input type="text" name="config[var]" value="{$config.var}"
											{tip class="lms-ui-autogrow" text="Enter option name" trigger="var" bold=1}>
									{else}
										<strong>{$config.var}</strong>
										<input type="hidden" name="config[var]" value="{$config.var}">
									{/if}
									{icon name="url" class="lms-ui-button-clipboard lms-ui-static" tip="Copy link"
										data_clipboard_text="{$url}?m=configedit&s={$config.section}&v={$config.var}"}
								</td>
							</tr>
						</tbody>
					</table>
				</td>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td class="lmsbox-panels">
					<div class="lmsbox-panel">
						<table>
							<colgroup>
								<col style="width: 1%;">
								<col style="width: 1%;">
								<col style="width: 98%;">
							</colgroup>
							<tbody>
								<tr>
									<td>
										{icon name="service"}
									</td>
									<td class="bold">
										{trans("Value:")}
									</td>
									<td>
										<textarea rows="5" cols="50" name="config[value]" {tip class="lms-ui-wysiwyg-editor" text="Enter option value" trigger="value"}
											data-wysiwyg="{if $config.type == $smarty.const.CONFIG_TYPE_RICHTEXT || (isset($config.wysiwyg.value) && ConfigHelper::checkValue($config.wywiwyg.value))}true{else}false{/if}"
											>{$config.value}</textarea>
									</td>
								</tr>
								<tr>
									<td>
										{icon name="comment"}
									</td>
									<td class="bold">
										{trans("Comment:")}
									</td>
									<td>
										<textarea rows="5" cols="50" name="config[description]" {tip text="Enter description (optional)" trigger="description"}>{$config.description}</textarea>
									</td>
								</tr>
								<tr>
									<td>
										{icon name="wait"}
									</td>
									<td class="bold">
										{trans("Status:")}
									</td>
									<td>
										<input type="checkbox" value="1" id="disabled" name="config[disabled]" {if $config.disabled}CHECKED{/if} {tip text="You can turn it off"}><label for="disabled"> {trans("Off")}</label>
									</td>
								</tr>
								{if ConfigHelper::checkPrivilege('superuser') && empty($reftype)}
									<tr>
										<td>
											{icon name="type"}
										</td>
										<td class="bold">
											{trans("Type:")}
										</td>
										<td>
											<select size="1" name="config[type]" {tip text="Select config type" trigger="type"}>
												{foreach $_CONFIG_TYPES as $key => $type}
													<option value="{$key}"{if $config.type == $key} selected{/if}>{$type}</option>
												{/foreach}
											</select>
										</td>
									</tr>
								{/if}
								{if !empty($reftype)}
									<input type="hidden" name="config[type]" value="{$config.type}">
								{/if}
							</tbody>
						</table>
					</div>
					<div class="lmsbox-panel">
						<table>
							<colgroup>
								<col style="width: 1%;">
								<col style="width: 99%;">
							</colgroup>
							<tbody>
								<tr>
									<td>
										<i class="lms-ui-icon-help fa-fw"></i>
									</td>
									<td class="bold documentation-label">
										{trans("Documentation:")}
									</td>
								</tr>
								<tr>
									<td colspan="2" id="documentation">
										{$config.documentation}
									</td>
								</tr>
							</tbody>
						</table>
					</div>
				</td>
			</tr>
			<tr>
				<td class="lms-ui-box-buttons">
					{button type="submit" id="document-submit" icon="save" label="Submit"}
					{button id="delete-config" data_href="?m=configdel&id={$config.id}" icon="delete" label="Delete"}
					{button type="link-button" href="?m=configedit&action=cancel" icon="cancel" label="Cancel"}
				</td>
			</tr>
		</tbody>
	</table>
</form>

{if empty($reftype)}
	{include file="config/configdivisions.html"}
	{include file="config/configusers.html"}
{/if}
{if $reftype == 'division'}
	{include file="config/configdivisionusers.html"}
{/if}

<script>

$(function() {
	function getDocumentation(section, variable) {
		if (section.length < 3 || variable.length < 3 ||
				!section.match(/^[a-z0-9_-]+$/) || !variable.match(/^[a-z0-9_-]+$/)) {
			return;
		}
		$.ajax('?m=configinfo&api=1&variable=' + $('[name="config[section]"]').scombobox('val') + '.' + variable, {
			async: true,
			method: 'POST',
			dataType: 'html',
			success: function(data) {
				$('#documentation').html(data);
			}
		});
	}

	$('form[name="config"] [name="config[var]"]').focus();

	$('[name="config[type]"]').change(function() {
		$('[name="config[value]"]').trigger('lms:visual_editor_change_required', {
			ifShow: $(this).val() == '{$smarty.const.CONFIG_TYPE_RICHTEXT}'
		});
	});

	$('#delete-config').click(function() {
		var name = '{$config.section}.{$config.var}';
		confirmDialog($t("Are you sure, you want to delete option '$a' from database?", name), this).done(function() {
			location.href = $(this).attr('data-href');
		});
		return false;
	});

	new AutoSuggest({
		form: '#configedit',
		elem: '[name="config[var]"]',
		uri: '?m=quicksearch&ajax=1&api=1&mode=config&what=',
		emptyValue: true,
		class: 'config-var-suggestion',
		autoSubmitForm: false,
		onSubmit: function (data) {
			$('[name="config[var]"]').val(data.name).trigger('autogrow');
			$('[name="config[section]"]').scombobox('val', data.section);
			getDocumentation(data.section, data.name);
			$('#configedit').trigger('lms:form_validation_failed');
		},
		onLoad: function() {
			$('[name="config[var]"]:ui-tooltip').tooltip('destroy');
		},
		onAjax: function(uri) {
			return uri + '&section=' + $('[name="config[section]"]').scombobox('val');
		}
	});

	$('[name="config[var]"]').change(function() {
		var section = $('[name="config[section]"]').scombobox('val');
		var variable = $('[name="config[var]"]').val();
		getDocumentation(section, variable);
	});

	$('#document-submit').on('click', function () {
		$('#configedit').append('<input type="hidden" name="action" value="save">');
	});
});

</script>
{/block}
