@(roles: List[Role])(implicit user: Option[models.User])

<!-- Need this in order to declare the var: -->
@import api.Permission; var prevResourceStr = ""
@import play.api.i18n.Messages

@main("Manage Roles") {
    <script src="@routes.Assets.at("javascripts/manageRoles.js")" type="text/javascript"></script>
    <script>
		function handleRemoval(roleid, theElement, url){
			var couldRemove = removeRole(roleid, url);
		}
	</script>
    <div class="page-header">
        <h1>Roles</h1>
        <p>The list below shows all the roles available on the system.
            Roles are used to moderate access to @Messages("spaces.title"), the top data Spaces.
            Use the create new role button to create a new one.</p>
    </div>
    <div class="row">
        <div class="col-md-12">
            @if(roles.isEmpty) {
                <div>No roles defined</div>
            }
            <div><a href="@routes.Admin.createRole()" class="btn btn-primary"><span class="glyphicon glyphicon-ok"></span> Create New Role</a></div>
            @if(!roles.isEmpty) {
                <table class="table">
                    <colgroup>
                        <col class="col-md-2">
                        <col class="col-md-4">
                        <col class="col-md-4">
                        <col class="col-md-2">
                    </colgroup>
                    <thead><tr><th>Name</th><th>Description</th><th>Permissions</th><th>Edit / Delete</th></tr></thead>
                    @for(role <- roles) {
                        <tr><td>@role.name</td><td>@role.description</td><td id="permission">
                        @if(!role.permissions.isEmpty) {
                            <table class="table-progressive">
                                <tr><td>
                                    @for( p <- api.Permission.values.toList filter { role.permissions contains _.toString() } map { _.toString() } ) {
                                        @defining(p) { permissionStr =>
                                            @defining(p.replaceFirst("(\\p{Ll})(\\p{Lu})", "$1 $2").replaceFirst("\\w+ (.+[^s])[s]?", "$1")) { currResourceStr =>
                                                @if(currResourceStr == prevResourceStr) {
                                                    |
                                                } else {
                                                    @{prevResourceStr = currResourceStr}
                                                    @Html("</td></tr><tr><td><b>"+ currResourceStr.replaceAll("(\\p{Ll})(\\p{Lu})", "$1 $2") +": </b>")
                                                }
                                                @Html(permissionStr.replaceFirst("(\\p{Ll})(\\p{Lu})", "$1 $2").replaceFirst("(\\w+) .+", "$1"))
                                            }
                                        }
                                    }
                                </td></tr>
                            </table>
                        }
                        </td>
                        <td>
                            <a href="@routes.Admin.editRole(role.id)" class ="btn btn-link"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span></a>
                            <button onclick="handleRemoval('@role.id',this, '@(routes.Admin.listRoles())')"
                            type="button" class="btn btn-link"><span class="glyphicon glyphicon-trash"/></button></td>
                        </tr>
                    }
                </table>
            }
        </div>
    </div>
}