{script}
{literal}
$(document).ready(function(){
	$('#roles').sortable({
		items: 'tr.role',
		helper: 'clone',
		placeholder: 'placeholder',
		start: function(event, ui){
			$(ui.placeholder).append('<td colspan="4"></td>');
		},
		update: function(event, ui){
			var set = {};

			$('#roles tr.role td input:checkbox[name="role[]"]').each(function(i){
				var id = $(this).val();
				set['order['+id+']'] = ++i;
			});

			url = '{/literal}{url_for for="ADMIN_CTRL_Users:ajaxReorder"}{literal}';

			$.post( url, set );
		},
		stop: function(event, ui){

			$set = $('#roles tr.role td input:checkbox[name="role[]"]');
			 
			$set.attr('disabled', false);

			$( $set[0] ).attr('disabled', 'disabled').attr('checked', false);

			$('td span.default-role:visible', this).hide();

			$('td input:checkbox[name]')
			
			$( $(this).sortable('option', 'items'), this ).each(function(i){
				if(i == 0)
					$('td span.default-role', this).show();

				var isEven = (i+1) % 2 === 0;

				remClass = isEven ? 'ow_alt1':'ow_alt2';
				addClass = isEven ? 'ow_alt2':'ow_alt1';
				
				if( $(this).hasClass(remClass) )
					$(this).removeClass( remClass );

				if( !$(this).hasClass(addClass) )
					$(this).addClass( addClass );

			})
		}
	});

	$(".edit_role", "#roles").click(function(){
	    var roleId = $(this).attr("rel");

	    editRoleFloatBox = OW.ajaxFloatBox(
	    	"ADMIN_CMP_AuthorizationRoleEdit", 
	    	{ roleId: roleId }, 
	    	{ width:400, iconClass: "ow_ic_edit", title: OW.getLanguageText('admin', 'permissions_edit_role_btn') }
	    );
	});
});

{/literal}
{/script}

{style}
{literal}
tr.placeholder td{
	border: 1px dashed grey;
	height: 35px;
	width: 100%;
}

.role{
	cursor: move;
}
{/literal}
{/style}

<div class="ow_automargin ow_wide">
	<form action="{url_for for="ADMIN_CTRL_Users:deleteRoles"}" method="POST">
	    <table id="roles" class="ow_table_2 ow_form ow_stdmargin ow_center">
	        <tr class="ow_tr_first">
	            <th width="1"></th>
	            <th>{text key='admin+permissions_user_role'}</th>
	            <th width="1">{text key='admin+permissions_number_of_users'}</th>
	            <th width="1"><span class="ow_nowrap">{text key='admin+avatar_label'}</span></th>
	        </tr>

	        {foreach name="roles" from=$set item='item'}
		        {assign var='role' value=$item.dto}
		        {assign var='roleId' value=$role->id}
		        <tr class="{cycle values='ow_alt1, ow_alt2'} role">
		            <td>
		            	<input type="checkbox" name="role[]" value="{$role->id}" {if $smarty.foreach.roles.first}disabled="disabled"{/if} />
		            </td>
		            <td class="ow_txtleft">
		            	{text_edit key="base+authorization_role_`$role->name`"}  
		            	<span class="ow_mild_green ow_small default-role" style="display:{if $smarty.foreach.roles.first}inline{else}none{/if};">
		            		{text key='admin+permissions_default_role'}
		            	</span>
		            </td>
		            <td class="ow_nowrap">
		            	{math equation="(x/y)*100" x=$item.userCount y=$total assign='percent'}
		            	<a href="{url_for_route for="admin_users_browse_membership_owners:[roleId=>`$roleId`]"}">{$item.userCount}</a> | {$percent|string_format:'%.1f'}%
		            </td>
		            <td style="min-width: 40px;">
		            {if $role->displayLabel}
                        <a class="ow_lbutton edit_role" rel="{$role->id}" href="javascript://"{if !empty($role->custom)} style="background-color: {$role->custom}"{/if}>
                            {text key='base+yes'}
                        </a>
		            {else}
                        <a href="javascript://" rel="{$role->id}" class="edit_role">{text key='base+no'}</a>
		            {/if}
		            </td>
		        </tr>
		        {/foreach}
			<tr class="ow_tr_last">
				<td>
					<input id="check_all" type="checkbox" onclick="$('#roles tr.role td input:checkbox:enabled').attr('checked', this.checked );" />
				</td>
				<td colspan="3" style="text-align: left;">
					<label for="check_all">{text key='admin+permissions_check_all_selected'}</label>
					<form>
						{script}
						{literal}

							function delRoles(){
								if( $('#roles tr.role td input:checkbox:checked').size() == 0 ){ 
									alert('{/literal}{text key='admin+permissions_please_select_role'}{literal}'); 
									return false;
								}

								return confirm('{/literal}{text key='admin+permissions_are_you_sure'}{literal}');								
							}

						{/literal}
						{/script}
						{decorator name='button' type='submit' langLabel='admin+permissions_delete_role' class='ow_button ow_red ow_ic_delete' onclick="return delRoles()"}
					</form>									
				</td>
			</tr>
	    </table>
	</form>

    {block_decorator name='box' addClass='ow_stdmargin ow_center' type='empty' langLabel='admin+add_new_role_block_cap_label' iconClass='ow_ic_add'}
        	{form name="add-role"}
	            {label name="label"} {input name="label" style="width: 270px;"}
	            {submit name="submit" class=" ow_mild_green ow_ic_add"}
            {/form}
    {/block_decorator}
    {block_decorator name='box' addClass='ow_stdmargin' type='empty' langLabel='admin+user_role_permissions_cap_label' iconClass='ow_ic_gear_wheel'}
        {capture assign="permissionsPageUrl"}{url_for for='ADMIN_CTRL_Permissions:roles'}{/capture}
        {text key='admin+permissions_go_to_permissions_page' url="$permissionsPageUrl"}
    {/block_decorator}
</div>
