<table class="table nextweektable" ng-if="department.days.collaborators.length>0">
    <thead>
        <tr>
            <td>
                <strong>
                    <a ng-if="department.days.adminLink" href="#/admin/departments/{{department._id}}">
                        <i class="fa fa-group"></i> {{department.name}}
                    </a>
                </strong>


            </td>
            <th style="width:7ex" class="text-center vgradiant" ng-repeat="col in department.days.collaborators[0].days" ng-class="{'hidden-xs': $index>7 }">
                <span data-title="{{col.date|date}}" bs-tooltip>{{col.date|date:'d'}}</span>
            </th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td><i ng-if="department.loading" class="fa fa-spinner fa-spin fa-fw"></i></td>
            <td>
                <button type="button" class="btn btn-default hidden-lg hidden-md hidden-sm" title="{{'Previous page'|translate}}" ng-click="departmentReload(department, -8)">
                    <i class="fa fa-chevron-circle-left"></i>
                </button>

                <button type="button" class="btn btn-default hidden-xs" title="{{'Previous page'|translate}}" ng-click="departmentReload(department, -14)">
                    <i class="fa fa-chevron-circle-left"></i>
                </button>


            </td>
            <td colspan="6"></td>
            <td class="hidden-lg hidden-md hidden-sm">
                <button type="button" class="btn btn-default" title="{{'Next page'|translate}}" ng-click="departmentReload(department, 8)">
                    <i class="fa fa-chevron-circle-right"></i>
                </button>
            </td>
            <td class="hidden-xs" colspan="6"></td>
            <td class="hidden-xs">
                <button type="button" class="btn btn-default" title="{{'Next page'|translate}}" ng-click="departmentReload(department, 14)">
                    <i class="fa fa-chevron-circle-right"></i>
                </button>
            </td>
        </tr>
    </tfoot>
    <tbody>
        <tr ng-repeat="collaborator in department.days.collaborators">
            <th class="active" ng-class="{ 'btn-link': department.days.adminLink }" ng-click="department.days.viewCollaborator(collaborator)">
                <img class="img-rounded" ng-src="{{collaborator.imageUrl}}" data-title="{{collaborator.lastname}} {{collaborator.firstname}}" height="35" bs-tooltip />
                <span class="hidden-sm hidden-xs">{{collaborator.lastname}} {{collaborator.firstname}}</span>
            </th>

            <td class="text-center"
                ng-repeat="col in collaborator.days"
                ng-class="[col.className,{ 'hidden-xs': $index>7 }]"
                >
                <i class="text-muted fa fa-times nonworkingday" ng-if="col.nonworkingday" data-title="{{col.nonworkingday.summary}}" bs-tooltip></i>
                <i ng-repeat="event in col.events"
                   class="fa"
                   ng-class="{ 'fa-calendar-check-o': event.status!='TENTATIVE', 'fa-calendar-times-o': event.status=='TENTATIVE' }"
                   data-title="{{event.dtstart|date:'shortTime'}} - {{event.dtend|date:'shortTime'}}" bs-tooltip></i>
            </td>
        </tr>
    </tbody>
</table>
