<div class="bootstrap-wrapper">
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <div class="row">
                        <div class="col-lg-8 col-xs-8 col-sm-8 col-md-8">
                            <input type="text" class="form-control" placeholder="{{'Search' | translate}}..." name="s" ng-model="searchq" style="max-width:60%;" ng-change="updateFilterItems(searchq)">
                        </div>
                        <div class="col-lg-4 col-xs-4 col-sm-4 col-md-4">
                            <span ng-show="isAdmin" class="pull-right"><button type="button" class="btn btn-info" ng-click="create()">{{'Create quiz' |translate}}</span>
                        </div>
                    </div>
                </div>
                <div class="panel-body">
                    <div wizdom365-spinner="" loading="loading"></div>
                    <div ng-hide="loading">
                        <div ng-hide="list.length">
                            {{'There has not been created any quizzes yet' | translate}}
                        </div>
                        <div ng-show="list.length">
                            <div ng-hide="filteredItems.length">
                                {{'No quizzes matches your search' | translate}}
                            </div>
                            <div class="table-responsive">
                                <table class="table" ng-show="filteredItems.length">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th ng-click="changesort('hasResponded')">{{'Has responded' | translate}}</th>
                                            <th ng-click="changesort('title')">{{'Title' | translate}}</th>
                                            <th ng-click="changesort('endDate')">{{'End date' | translate}}</th>
                                            <th ng-click="changesort('numberOfResponses')">{{'Responses' | translate}}</th>
                                            <th></th>
                                        </tr>
                                    </thead>
                                    <tbody class="valign-middle">
                                        <tr ng-repeat="quiz in filteredItems | orderBy: orderprop:orderdirection | pagination: currentPage * webpartProperties.numberPrPage | limitTo: webpartProperties.numberPrPage">
                                            <td>{{$index+1}}</td>
                                            <td>
                                                <span ng-hide="quiz.hasResponded" style="color:red" class="glyphicon glyphicon glyphicon-warning-sign"></span>
                                                <span ng-show="quiz.hasResponded" style="color:green" class="glyphicon glyphicon-check"></span>
                                            </td>
                                            <td>
                                                <span ng-show="checkDate(quiz.startDate)">
                                                    <a href="" ng-href="{{webpartProperties.viewUrl}}?id={{quiz.id}}">{{quiz.title}}</a>
                                                    <span ng-show="checkDate(quiz.endDate)">({{'Ended' | translate}})</span>
                                                    <span ng-hide="checkDate(quiz.endDate)">({{'Ongoing' | translate}})</span>
                                                </span>
                                                <span ng-hide="checkDate(quiz.startDate)">
                                                    {{quiz.title}}<span style="font-style:italic">({{'Not started. Starts' | translate}} {{quiz.startDate | wizdom365GfFormatDate |  date:'dd/MM-yyyy HH:mm'}})</span>
                                                </span>
                                            </td>
                                            <td>{{quiz.endDate | wizdom365GfFormatDate |  date:'dd/MM-yyyy HH:mm'}}</td>
                                            <td>{{quiz.numberOfResponses}}</td>
                                            <td>
                                                <a ng-show="quiz.isAdmin" ng-href="{{webpartProperties.editUrl}}?id={{quiz.id}}" class="glyphicon glyphicon-pencil showHand"></a>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                                <wizdom365-gf-pagination ng-hide="filteredItems.length <= webpartProperties.numberPrPage" items="filteredItems" current-page="currentPage" num-per-page="webpartProperties.numberPrPage"></wizdom365-gf-pagination>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
