<div class="bootstrap-wrapper gamification">
    <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 tournament' | 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 tournaments yet' | translate}}
                        </div>
                        <div ng-show="list.length">
                            <div ng-hide="filteredItems.length">
                                {{'No tournaments matches your search' | translate}}
                            </div>
                            <div class="table-responsive">
                                <table class="table" ng-show="filteredItems.length">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th ng-click="changesort('isAContender')">{{'Has placed a bet' | translate}}</th>
                                            <th ng-click="changesort('title')">{{'Title' | translate}}</th>
                                            <th ng-click="changesort('endDate')">{{'End date' | translate}}</th>
                                            <th ng-click="changesort('numberOfContenders')">{{'Active users' | translate}}</th>
                                            <th></th>
                                        </tr>
                                    </thead>
                                    <tbody class="valign-middle">
                                        <tr ng-repeat="obj in filteredItems | orderBy: orderprop:orderdirection | pagination: currentPage * webpartProperties.numberPrPage | limitTo: webpartProperties.numberPrPage">
                                            <td>{{$index+1}}</td>
                                            <td>
                                                <span ng-hide="obj.isaContender == true" style="color:red" class="glyphicon glyphicon glyphicon-warning-sign"></span>
                                                <span ng-show="obj.isaContender == true" style="color:green" class="glyphicon glyphicon-check"></span>
                                            </td>
                                            <td>
                                                <span ng-show="checkDate(obj.startDate)">
                                                    <a href="" ng-href="{{webpartProperties.viewUrl}}?id={{obj.id}}">{{obj.title}}</a>
                                                    <span ng-show="checkDate(obj.endDate)">({{'Ended' | translate}})</span>
                                                    <span ng-hide="checkDate(obj.endDate)">({{'Ongoing' | translate}})</span>
                                                </span>
                                                <span ng-hide="checkDate(obj.startDate)">
                                                    {{obj.title}}<span style="font-style:italic">({{'Not started. Starts' | translate}} {{obj.startDate | wizdom365GfFormatDate |  date:'dd/MM-yyyy HH:mm'}})</span>
                                                </span>
                                            </td>
                                            <td>{{obj.endDate | wizdom365GfFormatDate |  date:'dd/MM-yyyy HH:mm'}}</td>
                                            <td>{{obj.numberOfContenders}}</td>
                                            <td>
                                                <a ng-show="obj.isAdmin" ng-href="{{webpartProperties.editUrl}}?id={{obj.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>
