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

<style>

	.cell-flex {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}

	.cell-flex :not(:last-child) {
		margin-right: 0.5em;
	}

</style>

<h1>{$layout.pagetitle}</h1>

<form method="POST" name="tedit" id="tedit" action="?m=nodegroupedit&id={$nodegroup.id}">
	<input type="submit" class="hiddenbtn">
</form>

<form name="tmove" id="tmove" method="get" action="">
	<input type="hidden" name="is_sure" value="1">
	<input type="hidden" name="m" value="nodegroupmove">
	<input type="hidden" name="from" value="{$nodegroup.id}">
</form>

<table class="lmsbox">
	<colgroup>
		<col style="width: 1%;">
		<col style="width: 1%;">
		<col style="width: 98%;">
	</colgroup>
	<thead>
		<tr>
			<td>
				{icon name="nodegroup"}
			</td>
			<TD class="nobr">
				<strong>{trans("Name")}</strong>
			</TD>
			<td>
				<div class="lms-ui-cell-flex">
					<input type="text" value="{$nodegroup.name|escape}" name="nodegroup[name]"
						maxlength="255" pattern="{literal}[\.\-_a-zA-Z0-9\p{L}]+{/literal}" required form="tedit" {tip trigger="name" bold=1}>
					{hint mode="toggle" content="Group name can contain letters (with national characters), digits, dots, underscores and dashes."}
					<strong>(#{$nodegroup.id})</strong>
				</div>
			</td>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>
				{icon name="info"}
			</td>
			<td>
				<strong>{trans("Description")}</strong>
			</td>
			<td>
				<textarea rows="5" cols="50" name="nodegroup[description]" form="tedit"
					{tip text="Enter additional information (optional)"}>{$nodegroup.description|escape}</textarea>
			</td>
		</tr>
		<tr>
			<td colspan="3" class="lms-ui-box-buttons">
				<div class="cell-flex">
					{button type="submit" icon="save" label="Submit" form="tedit"}
					{button icon="cancel" label="Cancel"
						href="?m=nodegroupinfo&id={$nodegroup.id}{if $membersnetid}&membersnetid={$membersnetid}{/if}{if $othersnetid}&othersnetid={$othersnetid}{/if}"}
					{if count($nodegroups) > 1 && $nodegroup.count}
						{button label="Move members to group" id="move-members" icon="move" form="tmove"}
						<select size="1" name="to" form="tmove" required
							{tip text="Select group to which you want to move members"}>
							{foreach $nodegroups as $item}
								{if $item.id != $nodegroup.id}
									<option value="{$item.id}">{$item.name|escape}</option>
								{/if}
							{/foreach}
						</select>
					{/if}
				</div>
			</td>
		</tr>
	</tbody>
</table>

<script>

	$(function() {
		$('[name="nodegroup[name]"]').focus();

		$('#move-members').click(function() {
			confirmDialog($t("Are you sure, you want to move members to selected group?"), this).done(function() {
				$('#tmove').submit();
			});
			return false;
		});
	});

</script>
{include file="node/nodegroupassignments.html"}
{/block}
