<div class="form">

<form method="POST" id="{{_form}}">

<p>
	{"Role name"}: <span class="notice" id="name-notice">{"Required and must be unique."}</span><br />
	<input type="text" name="name" id="name-input" value="{{name|quotes}}" size="30" />
</p>

<p>
<table width="100%">
	<tr>
		<th>{"Permissions"}:</th>
	</tr>
	<tr>
		<td><input type="checkbox" name="resources[default]" id="resources-default" value="on" /> <label for="resources-default">{"Default access for this role"} <span class="notice" style="display: inline">({"selected means allow everything by default"})</span></label></td>
	</tr>
	{% foreach _resources as resource, label %}
	<tr>
		<td><input type="checkbox" name="resources[{{resource}}]" id="resources-{{resource|user\Filter::resource_id}}" value="on" /> <label for="resources-{{resource|user\Filter::resource_id}}" style="display: inline-block; width: 95%">{{label|__}}</label></td>
	</tr>
		{% if resource == 'user/edit_roles' %}
		<tr>
			<td  style="padding-left: 30px; height: 29px; line-height: 29px">{"Allowed roles"}:</td>
		</tr>
			{% foreach _roles as role %}
			<tr>
				<td style="padding-left: 30px"><input type="checkbox" name="resources[user/allowed_roles/{{role}}]" id="resources-user-allowed_roles-{{role}}" value="on" /> <label for="resources-allowed-roles-{{role}}" style="display: inline-block; width: 85%">{{role|ucfirst}}</label></td>
			</tr>
			{% end %}
		{% end %}
	{% end %}
</table>
</p>

<p>
	<input type="submit" value="{"Add Role"}" />&nbsp;
	<a href="javascript:history.go(-1)" onclick="return confirm ('{"Are you sure you want to cancel and lose any changes?"}')">{"Cancel"}</a>
</p>

</form>

</div>

<script>
$(function () {
	// re-check on re-render
	var resources = {{resources|json_encode}};
	for (var resource in resources) {
		$('#resources-' + resource.replace (/\//g, '-'))[0].checked = true;
	}
	
	// check all if default is checked because
	// then you can subtract resources to deny
	$('#resources-default').change (function () {
		if ($('#resources-default').is (':checked')) {
			$('input[type="checkbox"]').each (function () {
				this.checked = true;
			});
		} else {
			$('input[type="checkbox"]').each (function () {
				this.checked = false;
			});
		}
	});
	
	// make the name lowercase
	$('#name-input').blur (function () {
		$(this).val ($(this).val ().toLowerCase ());
	});
});
</script>

<style>
label {
	display: inline-block;
	width: 95%;
	height: 29px;
	line-height: 29px;
}
td {
	padding-top: 0px !important;
	padding-bottom: 0px !important;
}
</style>