<div growl></div>
<nav class="navbar navbar-inverse" role="navigation">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapsable">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand strong" href="#">Task Dashboard - Main</a>
    </div>
</nav>

<table class="table table-condensed ng-table-resizable-columns table-striped" ng-table="vm.allUserTableParams">
    <colgroup>
      	<col width="10%" />
      	<col width="20%" />
      	<col width="30%" />
		<col width="30%" />      
		<col width="10%" />		
    </colgroup>
    <tr class="ng-table-group" ng-repeat-start="group in $groups">
	    <td colspan="4">
            <a href="" ng-click="group.$hideRows = !group.$hideRows">
              <span class="glyphicon" ng-class="{ 'glyphicon-chevron-right': group.$hideRows, 'glyphicon-chevron-down': !group.$hideRows }"></span>
              <strong>{{ group.value }}</strong>
            </a>
	    </td>
    </tr>
    <tr ng-hide="!group.$hideRows" ng-repeat="task in group.data" ng-repeat-end ng-controller="groupCtrl">
        <td data-title="'#ID'" class="text-center">{{ task.id }}</td>
        <!--
        <td data-title="'User'" class="text-center" groupable="'userId'">{{ task.userId }}</td> -->
        <td data-title="'Task'" class="text-center">{{ task.title | limitTo: 40 }}{{task.title.length > 40 ? '...' : ''}}</td>
        <td data-title="'Description'" class="text-center">{{ task.description | limitTo: 60 }}{{task.description.length > 60 ? '...' : ''}}</td>
        <td data-title="'Status'" class="text-center">
            <span ng-show="task.closed" class="label label-success">Completed</span>
            <span ng-show="!task.closed" class="label label-warning">In Progress</span>
        </td>
    </tr>
</table>

