{extends file="layout.html"}
{block name=title}LMS: {$layout.pagetitle|striphtml}{/block}
{block name=module_content}
<!--// $Id$ //-->
<h1>{$layout.pagetitle}</h1>
<table class="lmsbox lms-ui-background-cycle">
	<colgroup>
		<col style="width: 97%;">
		<col style="width: 1%;">
		<col style="width: 1%;">
		<col style="width: 1%;">
	</colgroup>
	<thead>
		<tr>
			<td>
				{icon name="nodegroup"}
				<strong>{trans("Name")}</strong>
				<br>
				{icon name="info"}
				{trans("Description")}
			</td>
			<td class="text-right">
				{trans("ID")}
			</td>
			<td class="text-right">
				{trans("Members")}
			</td>
			<td class="text-right nobr">
				<strong>{t a=$listdata.total|default:"0"}Total: $a{/t}</strong>
			</td>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<td colspan="2" class="text-right bold">
				{icon name="info"}
				{trans("Total:")}
			</td>
			<td class="text-right nobr">
				<strong>{$listdata.nodestotal|default:"0"}</strong>
			</td>
			<td>
				&nbsp;
			</td>
		</tr>
	</tfoot>
	<tbody id="nodegrouplist">
		{foreach $nodegrouplist as $nodegroup}
			<tr class="highlight" data-nodegroup-id="{$nodegroup.id}" data-name="{$nodegroup.name}">
				<td data-target-url="?m=nodegroupinfo&id={$nodegroup.id}">
					{icon name="nodegroup"}
					<strong>{$nodegroup.name|escape}</strong>
					<br>
					{if $nodegroup.description}
						{icon name="info"}
						{$nodegroup.description|escape}
					{/if}
				</td>
				<td class="text-right" data-target-url="?m=nodegroupinfo&id={$nodegroup.id}">
					(#{$nodegroup.id})
				</td>
				<td class="text-right" data-target-url="?m=nodegroupinfo&id={$nodegroup.id}">
					{$nodegroup.nodescount}
				</td>
				<td class="text-right nobr">
					{if $nodegroup.nodescount}
						{button type="link" icon="delete" tip="Delete" class="delete-nodegroup-alert"}
					{else}
						{button type="link" icon="delete" tip="Delete" class="delete-nodegroup"
							data_href="?m=nodegroupdel&id={$nodegroup.id}"}
					{/if}
					{button type="link" icon="edit" tip="edit" href="?m=nodegroupedit&id={$nodegroup.id}"}
					{button type="link" icon="info" tip="Info" href="?m=nodegroupinfo&id={$nodegroup.id}"}
				</td>
			</tr>
		{foreachelse}
			<tr>
				<td colspan="4" class="empty-table">
					{trans("There are no such groups in database.")}
				</td>
			</tr>
		{/foreach}
	</tbody>
</table>
<script>

	$(function() {
		$('#nodegrouplist').sortable({
			items: "> tr[data-nodegroup-id]",
			opacity: 0.9,
			axis: "y",
			placeholder: "light",
			update: function(event, ui) {
				var nodegroupids = [];
				ui.item.parent().children('tr[data-nodegroup-id]').each(function(index, value) {
					nodegroupids.push($(this).attr('data-nodegroup-id'));
				});
				$.ajax('?m=nodegrouplist', {
					method: "POST",
					data: {
						nodegroupids: nodegroupids
					},
					dataType: "json",
					success: function(data, textStatus, qXHR) {
						if (data.result === undefined || data.result != 'OK') {
							$('#nodegrouplist').sortable('cancel');
							alertDialog($t("LMS: operation failed!"));
						}
					},
					error: function(jqXHR, textStatus, errorThrown) {
						$('#nodegrouplist').sortable('cancel');
						alertDialog($t("AJAX: Invalid result - status: $a", textStatus));
					}
				});
			}
		});

		$('.delete-nodegroup').click(function() {
			var name = $(this).closest('tr').attr('data-name');
			confirmDialog($t("Are you sure, you want to remove group '$a'?", name), this).done(function() {
				location.href = $(this).attr('data-href');
			});
			return false;
		});

		$('.delete-nodegroup-alert').click(function() {
			var name = $(this).closest('tr').attr('data-name');
			alertDialog($t("Group '$a' has members and cannot be deleted!", name), this);
			return false;
		});
	});

</script>
{/block}
