<br><script type="text/javascript">
selectRolePerms = function (id) \{
    // Exit when id empty
    if(id == '') {
        return false;
    }

    // Get perms of role via ajax query
    var aRoles = getSyncRequest(oGeneralProperties.path_server+'?mod=RoleMgmt&act=getRolePerms&roleId='+id, false, false);

    var oForm = document.getElementById('roleEditForm');

    // Get relevant input elements
    var aFields = oForm.getElementsByTagName('input');
    for(var i = 0, len = aFields.length; i < len; i++) \{
        if(aFields[i].type == "checkbox") \{
            // First reset all checkboxes
            if(aFields[i].checked) \{
                aFields[i].checked = false;
            }

            // Extract permission id from name
            var id = aFields[i].name.split('_')[1];

            // Enable checkboxes of matched permissions
            if(aRoles && aRoles[id] && aRoles[id] == true) \{
                aFields[i].checked = true;
            }
        }
    }

    aFields = null;
    oForm = null;
    aRoles = null;
}
</script>

<div id="manageRoles">
<fieldset class="form">
    <legend>{$langRoleAdd}</legend>
    <form name="roleAdd" id="roleAddForm" action="#" onsubmit="submitFrontendForm('{$formTargetAdd}', 'roleAddForm', true);return false" method="post">
        <table>
            <tr>
                <td><label for="name">{$langRoleName}:</label></td>
                <td><input type="text" name="name" id="name" class="input" value="" size="{$maxRolenameLength}" tabindex="10" /></td>
                <td><input type="submit" name="submit" id="submit" value="{$langRoleAdd}" tabindex="20" /></td>
            </tr>
        </table>
    </form>
</fieldset>
</div>

<div id="manageRoles">
<fieldset class="form">
    <legend>{$langRoleModify}</legend>
    <form name="roleEdit" id="roleEditForm" action="#" onsubmit="submitFrontendForm('{$formTargetEdit}', 'roleEditForm', true);return false" method="post">
        <p>
            <label>{$langSelectRole}<br />
            <select type="text" name="roleId" id="roleId" class="select" tabindex="10" onchange="selectRolePerms(this.options[this.selectedIndex].value);" />
                <option value="" selected="selected"></option>
                {foreach $roles role}<option value="{$role.roleId}">{$role.name}</option>{/foreach}
            </select>
            </label>
        </p>
        <p>
            <label>{$langSetPermissions}<br />
            <table>
                <tr>
                    <th>{$langModule}</th>
                    <th>{$langAction}</th>
                    <th>{$langObject}</th>
                    <th>{$langPermitted}</th>
                </tr>
                {foreach $perms perm}
                <tr>
                    <td>{$perm.mod}</td>
                    <td>{$perm.act}</td>
                    <td>{$perm.obj}</td>
                    <td><input type="checkbox" name="perm_{$perm.permId}" value="1"></td>
                </tr>
                {/foreach}
            </table>
            </label>
        </p>
        <p class="submit">
            <input type="submit" name="submit" id="submit" value="{$langRoleModify}" tabindex="100" />
        </p>
    </form>
</fieldset>
</div>

<div id="deleteRoles">
<fieldset class="form">
    <legend>{$langRoleDelete}</legend>
    <form name="roleDelete" id="roleDeleteForm" action="#" onsubmit="submitFrontendForm('{$formTargetDelete}', 'roleDeleteForm', true);return false" method="post">
        <table>
            <tr>
                <td><label for="roleId">{$langRoleName}:</label></td>
                <td>
                    <select type="text" name="roleId" id="roleId" class="select" tabindex="40" />
                        <option value="" selected="selected"></option>
                        {foreach $roles role}<option value="{$role.roleId}">{$role.name}</option>{/foreach}
                    </select>
                </td>
                <td><input type="submit" name="submit" id="submit" value="{$langRoleDelete}" tabindex="100" /></td>
            </tr>
        </table>
    </form>
</fieldset>
</div>