<h2>{{lang_editMenuHead}}</h2>

<div class="panel panel-default">
	<div class="panel-heading">
		{{title}}
		{{^title}}
			{{lang_newMenu}}
		{{/title}}
	</div>
	<div class="panel-body list-group">
		<form method="post" action="?do=serversetup">
			<input type="hidden" name="token" value="{{token}}">
			<input type="hidden" name="action" value="savemenu">
			<input type="hidden" name="menuid" value="{{menuid}}">

			<div class="row list-group-item">
				<div class="col-sm-3">
					<label for="panel-title">{{lang_menuTitle}}</label>
				</div>
				<div class="col-sm-9">
					<input class="form-control" name="title" id="panel-title" type="text" value="{{title}}" {{readonly}}>
				</div>
			</div>
			<div class="row list-group-item">
				<div class="col-sm-3">
					<label for="panel-timeout">{{lang_menuTimeout}}</label>
				</div>
				<div class="col-sm-9">
					<div class="input-group">
						<input class="form-control" name="timeout" id="panel-timeout" type="number" min="0" max="9999"
								 value="{{timeout}}" {{readonly}}>
						<span class="input-group-addon">{{lang_seconds}}</span>
					</div>
				</div>
			</div>
			<div class="row list-group-item">
				<div class="col-sm-3">
				</div>
				<div class="col-sm-9">
					<div class="checkbox">
						<input name="defmenu" id="panel-defmenu" type="checkbox" {{#isdefault}}checked{{/isdefault}} {{disabled}}>
						<label for="panel-defmenu">{{lang_defaultMenu}}</label>
					</div>
				</div>
			</div>
			<div>
				<table class="table">
					<thead>
					<tr>
						<th></th>
						<th></th>
						<th>{{lang_entryId}}</th>
						<th>{{lang_title}}</th>
						<th>{{lang_hotkey}}</th>
						<th>{{lang_password}}</th>
					</tr>
					</thead>
					<tbody id="table-body" style="overflow: auto;">
					{{#entries}}
						<tr id="{{menuentryid}}">
							<input type="hidden" class="sort-val" name="entry[{{menuentryid}}][sortval]" value="{{sortval}}">
							<td class="drag-handler" style="cursor: pointer;text-align: center; vertical-align: middle;">
								<span class="glyphicon glyphicon-th-list"></span>
							</td>

							<td class="slx-smallcol" style="text-align: center; vertical-align: middle;">
								<div class="radio radio-inline" style="margin: 0px;">
									<input type="radio" name="defaultentry" value="{{menuentryid}}"
											 {{#isdefault}}checked{{/isdefault}} {{perms.ipxe.menu.edit.disabled}} {{disabled}}>
									<label></label>
								</div>
							</td>

							<td class="text-nowrap">
								{{#entryid}}
									<select class="form-control" name="entry[{{menuentryid}}][entryid]" {{readonly}}>
										<option value="">{{lang_spacer}}</option>
										{{#entrylist}}
											<option value="{{entryid}}" {{selected}}>{{title}}</option>
										{{/entrylist}}
									</select>
								{{/entryid}}
								{{^entryid}}
									<i>{{lang_spacer}}</i>
								{{/entryid}}
							</td>
							<td {{^entryid}}colspan="2"{{/entryid}}>
								<input class="form-control" name="entry[{{menuentryid}}][title]" value="{{title}}"
										 maxlength="100" {{readonly}}>
							</td>
							{{#entryid}}
								<td>
									<select class="form-control" name="entry[{{menuentryid}}][hotkey]" {{readonly}}>
										<option value="">{{lang_none}}</option>
										{{#keys}}
											<option {{selected}}>{{key}}</option>
										{{/keys}}
									</select>
								</td>
							{{/entryid}}

							<td>
								<input class="form-control" name="entry[{{menuentryid}}][plainpass]" id="panel-passwd" type="{{password_type}}"
										 value="{{plainpass}}" {{readonly}}>
							</td>
						</tr>
					{{/entries}}
					</tbody>
				</table>
			</div>
			<div class="text-right">
				<button type="submit" class="btn btn-primary" {{disabled}}>
					<span class="glyphicon glyphicon-floppy-disk"></span>
					{{lang_save}}
				</button>
			</div>
		</form>
	</div>
</div>

<script type="text/javascript">
	document.addEventListener("DOMContentLoaded", function() {
		$('#table-body').sortable({
			opacity: 0.8,
			handle: '.drag-handler',
			start: function(evt, ui) {
				ui.placeholder.css("visibility", "visible");
				ui.placeholder.css("opacity", "0.152");
				ui.placeholder.css("background-color", "#ddd");
			},
			stop: function() {
				var startValue = 1;
				$('.sort-val').each(function(index, element) {
					element.value = startValue * 10;
					startValue++;
				});
			}
		});
	});
</script>