{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;
	}

	#configadd-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;
	}

</style>

<form method="POST" id="configadd"  name="config"
	action="?m=configadd{if !empty($refconfigid)}&refconfigid={$refconfigid}{/if}{if !empty($reftype)}&reftype={$reftype}{/if}{if !empty($divisioninfo.id)}&divisionid={$divisioninfo.id}{/if}">
<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="configadd-lmsbox">
		<colgroup>
			<col style="width: 100%;">
		</colgroup>
		<thead>
			<tr>
				<td>
					<table>
						<colgroup>
							<col style="width: 1%;">
							<col style="width: 1%;">
							<col style="width: 98%;">
						</colgroup>
						<tbody>
							{if !empty($reftype) && $reftype == 'division'}
								<tr>
									<td>
										{icon name="division"}
									</td>
									<td class="nobr bold">
										{trans("Division")}
									</td>
									<td>
										<select size="1" name="config[divisionid]" {tip text="Select division" trigger="divisionid"}>
											{foreach $divisionslist as $division}
												<option value="{$division.id}"{if $config.division == $division.id} selected{/if}>{$division.label|escape}</option>
											{/foreach}
										</select>
									</td>
								</tr>
							{/if}
							{if !empty($reftype)}
								{if $reftype == 'divisionuser'}
									<tr>
										<td>
											{icon name="division"}
										</td>
										<td class="nobr bold">
											{trans("Division")}
										</td>
										<td>
											<strong>{$divisioninfo.shortname}</strong>
											<input type="hidden" name="config[divisionid]" value="{$divisioninfo.id}">
										</td>
									</tr>
								{/if}
								{if $reftype == 'divisionuser' || $reftype == 'user'}
									<tr>
										<td>
											{icon name="user"}
										</td>
										<td class="nobr bold">
											{trans("User")}
										</td>
										<td>
											<select size="1" name="config[userid]" {tip text="Select user" trigger="userid"}>
												{foreach $userslist as $user}
													<option value="{$user.id}"{if $config.user == $user.id} selected{/if}>{$user.login} / {$user.name|escape}</option>
												{/foreach}
											</select>
										</td>
									</tr>
								{/if}
							{/if}
							<tr>
								<td>
									{icon name="configuration"}
								</td>
								<td class="bold">
									{trans("Section:")}
								</td>
								<td>
									{if empty($reftype)}
										<select size="1" name="config[section]" {tip class="lms-ui-combobox" text="Select section" trigger="section"}
											{if !isset($config.section)}
												data-value=""
											{elseif !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">
									{trans("Name:")}
								</td>
								<td>
									{if empty($reftype)}
										<input type="text" name="config[var]" value="{$config.var}" size="30"
												{tip class="lms-ui-autogrow" text="Enter option name" trigger="var" bold=1}>&nbsp;
									{else}
										<strong>{$config.var}</strong>
										<input type="hidden" name="config[var]" value="{$config.var}">
									{/if}&nbsp;
								</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 width="98%">
										<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.wysiwyg.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" name="config[disabled]" id="config_disabled"{if $config.disabled} CHECKED{/if} {tip text="You can turn it off"}><label for="config_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 type="link-button" href="?m=configadd&action=cancel" icon="cancel" label="Cancel"}
					<br>
					<label>
						<input type="checkbox" name="config[reuse]" value="ON" id="reuse"{if $config.reuse} checked{/if}>
						{trans("Display this form again, when this option is saved")}
					</label>
				</td>
			</tr>
		</tbody>
	</table>
</form>

<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(e) {
		$('[name="config[value]"]').trigger('lms:visual_editor_change_required', {
			ifShow: $(this).val() == '{$smarty.const.CONFIG_TYPE_RICHTEXT}'
		});
	});

	new AutoSuggest({
		form: '#configadd',
		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[section]"]').scombobox('val', data.section);
			$('[name="config[var]"]').val(data.name).trigger('autogrow');
			getDocumentation(data.section, data.name);
			$('#configadd').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 () {
		$('#configadd').append('<input type="hidden" name="action" value="save">');
	});
});

</script>
{/block}
