<div ng:controller="UserMainController" class="row-fluid" id="body-main" qn:fillheight>
    <div class="col10">
        <div class="toolbar cfix">
            <div class="toolbar-group">
                <h3>
                    <span class="circle circle-small blue"><span class="icon li_user"></span></span>
                    {{$resource('users.title')}}
                </h3>
            </div>
            <div class="toolbar-group">
                <button ng:show="isSearch()" title="{{$resource('utility.reset')}}" class="button tooltip" ng:click="reset()"><i class="icon-angle-left"></i></button>
                <button title="{{$resource('utility.refresh')}}" class="button tooltip" ng:click="refresh()"><i class="icon-refresh"></i></button>
            </div>
            <div class="toolbar-group">
                <button title="{{$resource('utility.new')}}" class="button lightblue tooltip" ng:click="new()"><i class="icon-plus"></i></button>
                <button title="{{$resource('utility.search')}}" class="button tooltip" ng:click="filter()"><i class="icon-search"></i></button>
                <div class="form button-widget" qn:popover>
                    <form>
                        <div class="control-group">
                            <label>{{$resource('users.first_name')}}</label>
                            <div class="controls">
                                <input class="input-xlarge" placeholder="i.e. John" ng:model="query.FirstName"/>
                            </div>
                        </div>
                        <div class="control-group">
                            <label>{{$resource('users.last_name')}}</label>
                            <div class="controls">
                                <input class="input-xlarge" placeholder="i.e. Smit" ng:model="query.LastName"/>
                            </div>
                        </div>
                        <div class="control-group">
                            <label>{{$resource('users.email')}}</label>
                            <div class="controls">
                                <input class="input-xlarge" placeholder="i.e. john.smih@qusion.net" ng:model="query.Email"/>
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label"></label>
                            <div class="controls">
                                <button class="button lightblue" ng:click="search()"><i class="icon-search"></i></button>
                            </div>
                        </div> 
                    </form>
                </div>
            </div>
            <div class="toolbar-group right">
                <button title="{{$resource('utility.settings')}}" class="button tooltip" ng:click="goToSettings()"><i class="icon-cog"></i></button>
            </div>
            <div class="toolbar-group right">
                <span class="info">{{pager.from}}-{{pager.to}} of {{pager.total}}</span>
                <button class="button prev" ng:disabled="!pager.canPrev()" ng:click="pager.prev()"><i class="icon-chevron-left"></i></button>
                <button class="button next" ng:disabled="!pager.canNext()" ng:click="pager.next()"><i class="icon-chevron-right"></i></button>
            </div>
        </div>
        <div class="table table-hover fillh">
            <table>
                <thead>
                    <tr>
                        <th class="icon"></th>
                        <th>{{$resource('users.name')}}</th>
                        <th>{{$resource('users.created')}}</th>
                        <th class="command"></th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng:repeat="user in users | filter : searchUsers">
                        <td class="icon">
                            <div class="badges">
                                <img ng:show="user.AvatarID != null" ng:src="/qusion/image/thumb/{{user.AvatarID}}?width=40" alt=""/>
                                <div ng:show="user.AvatarID == null" class="circle blue"><i  class="icon-user"></i></div>
                                <div class="badge" ng:show="user.Locked"><i class="icon-lock"></i></div>
                            </div>
                        </td>
                        <td class="title" ng:click="edit(user)">
                            <div class="inner">
                                <h2>{{user.FullName()}}</h2>
                                <p class="info">{{user.Email}}</p>
                            </div>
                        </td>
                        <td>{{user.CreatedOn | date}}</td>
                        <td class="command icon">
                            <span title="{{$resource('utility.options')}}" class="trigger tooltip"><i class="icon-reorder"></i></span>
                            <div qn:popover="{position: {my: 'right top', at: 'left top'}}">
                                <ul>
                                    <li><a ng:click="remove(user, $index)" value="Are you sure?"><i class="icon-trash"></i>{{$resource('users.delete')}}</a></li>
                                    <li><a ng:click="setLockStatus(user)" value="Are you sure?"><span ng:show="user.Locked == false"><i class=" icon-ban-circle"></i>{{$resource('users.lock')}}</span><span ng:show="user.Locked == true"><i class=" icon-ok-circle"></i>Unlock</span></a></li>
                                </ul>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        
    </div>
    <div class="col2 sidebar">
        <div class="toolbar toolbar-strip lightblue cfix">
            <div class="toolbar-group row-fluid">
                <button title="{{$resource('utility.basic')}}" class="button lightblue col3 tooltip" ng:class="{active:sidebarView == 'basic'}" ng:click="switchSidebar('basic')"><i class="icon-star"></i></button>
                <button title="{{$resource('utility.teams')}}" class="button lightblue col3 tooltip" ng:class="{active:sidebarView == 'teams'}" ng:click="switchSidebar('teams')"><i class="icon-user"></i></button>
            </div>
        </div>
        <div class="inner fillh">
            <ul class="nav" ng:show="sidebarView == 'basic'">
                <li ng:class="{active:!isSearch()}"><a ng:click="reset()"><i class="icon-asterisk"></i>{{$resource('users.all_users')}}</a></li>
                <li ng:class="{active:query.locked==true}"><a ng:click="search({locked:true}, true)"><i class="icon-lock lightred"></i>{{$resource('users.locked_users')}}</a></li>
                <li ng:class="{active:query.locked==false}"><a ng:click="search({locked:false}, true)"><i class="icon-lock green"></i>{{$resource('users.unlocked_users')}}</a></li>
                <li ng:class="{active:query.Deactived==true}"><a ng:click="search({Deactived:true}, true)"><i class="icon-lock green"></i>DEAKTIVIRANI</a></li>
                <li><hr /></li>
                <li  ng:class="{active:query.roles=='users'}"><a ng:click="search({roles: 'users'}, true)"><i class="icon-angle-right"></i>{{$resource('users.users')}}</a></li>
                <li  ng:class="{active:query.roles=='administrators'}"><a ng:click="search({roles:'administrators'}, true)"><i class="icon-angle-right"></i>{{$resource('users.admins')}}</a></li>
            </ul>
            <ul class="nav" ng:show="sidebarView == 'teams'">
                <li ng:class="{active:!isSearch()}"><a ng:click="reset()"><i class="icon-asterisk"></i>{{$resource('users.all_users')}}</a></li>
                <li ng:class="{active:query.team==team.Alias}" ng:repeat="team in classification.Labels"><a ng:click="search({team: team.Alias}, true)"><i class="icon-angle-right"></i>{{team.Name}}</a></li>
            </ul>
        </div>
    </div>
</div>