<div ng:controller="RoleMainController" class="row-fluid" id="body-main" qn:fillheight>
    <div class="toolbar cfix">
        <div class="toolbar-group">
            <h3>
                <span class="circle circle-small blue"><span class="icon li_settings"></span></span>
                {{$resource('utility.roles')}}
            </h3>

        </div>
        <div class="toolbar-group">
            <button title="{{$resource('utility.new')}}" class="button lightblue tooltip"><i class="icon-plus"></i></button>
            <div qn:popover class="button-widget">
                <form name="NewRole" class="cfix">
                    <div class="control-group cfix">
                        <label for="NewRoleName">{{$resource('utility.role')}}</label>
                        <div class="controls">
                            <input type="text" id="NewRoleName" name="Name" ng:model="role" required />
                        </div>
                    </div>
                    <div class="control-group cfix">
                        <div class="controls">
                            <button class="button" ng:disabled="NewRole.$invalid" ng:click="create()"><i class="icon-ok"></i></button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="table table-hover fillh">
        <table>
            <thead>
                <tr>
                    <th>{{$resource('utility.name')}}</th>
                    <th>{{$resource('utility.number_users')}}</th>
                    <th class="command"></th>
                </tr>
            </thead>
            <tbody>
                <tr ng:repeat="role in roles">
                    <td class="title">
                        <div class="inner">
                            <h2>{{role.Role}}</h2>
                        </div>
                    </td>
                    <td>{{role.Users}}</td>
                    <td class="command icon">
                        <a ng:click="remove(role, $index)" value="Are you sure?"><i class="icon-trash"></i></a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>