<div class="row">
    <div class="col-md-6">
        <div class="panel panel-default">
            <div class="panel-heading">{{'Leaderboard' | translate}}</div>
            <div class="panel-body">
                <table class="table">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>{{'Name' | translate}}</th>
                            <th>{{'Points' | translate}}</th>
                        </tr>
                    </thead>
                    <tbody class="valign-middle">
                        <tr ng-hide="tournament.betUsers.length">
                            <td></td>
                            <td>{{'No users has placed a bet yet' | translate}}</td>
                        </tr>
                        <tr ng-repeat="user in tournament.betUsers | wizdom365GfOrderObjectBy:'balance':true | pagination: currentPageHighscore * numPerPage | limitTo:numPerPage track by $index">
                            <td>{{$index+1}}</td>
                            <td>
                                <div style="display:inline-block;" wizdom365-presence-picture="" size="SMALLROUNDED" email="user.email" name="user.name"></div>
                                {{user.name}}
                            </td>
                            <td>{{user.balance}}</td>
                        </tr>
                    </tbody>
                </table>
                <wizdom365-gf-pagination ng-hide="tournament.betUsers.length <= numPerPage" items="tournament.betUsers" current-page="currentPageHighscore" num-per-page="numPerPage"></wizdom365-gf-pagination>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="panel panel-default">
            <div class="panel-heading">
                <div wizdom365-gf-nav-tab-header 
                     sub-display-mode="subDisplayMode" 
                     current-page-sub-rankings="currentPageSubRankings" 
                     sub-info="subInfo"> 
                </div>
            </div>
            <div class="panel-body">
                <table class="table">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>{{'Name' | translate}}</th>
                            <th>{{subInfo.text | translate}}</th>
                        </tr>
                    </thead>
                    <tbody class="valign-middle">
                        <tr ng-hide="tournament.betUsers.length">
                            <td></td>
                            <td>{{'No users has placed a bet yet' | translate}}</td>
                        </tr>
                        <tr ng-repeat="user in tournament.betUsers | wizdom365GfOrderObjectBy:subInfo.orderProp:true | pagination: currentPageSubRankings * numPerPage | limitTo:numPerPage track by $index">
                            <td>{{$index+1}}</td>
                            <td>
                                <div style="display:inline-block" wizdom365-presence-picture="" size="SMALLROUNDED" email="user.email" name="user.name"></div>
                                {{user.name}}
                            </td>
                            <td ng-show="subDisplayMode == 1">{{user.numBets}}</td>
                            <td ng-show="subDisplayMode == 2">{{(Math.round(user.avgWins*100)).toFixed(2)}}%</td>
                            <td ng-show="subDisplayMode == 3">{{(user.avgBets).toFixed(2)}}</td>
                            <td ng-show="subDisplayMode == 4">{{(user.avgOdds).toFixed(2)}}</td>
                        </tr>
                    </tbody>
                </table><br />
                <wizdom365-gf-pagination ng-hide="tournament.betUsers.length <= numPerPage" items="tournament.betUsers" current-page="currentPageSubRankings" num-per-page="numPerPage"></wizdom365-gf-pagination>
            </div>
        </div>

    </div>
</div>

<div class="row">
    <div class="col-sm-12" ng-show="futuregames.length">
        <div class="panel panel-default">
            <div class="panel-heading">
                {{'Future matches' | translate}}
            </div>
            <div class="panel-body">
                <table class="table table-condensed responsivetable-big-screen">
                    <thead>
                        <tr>
                            <th class="hidetd">{{'Date' | translate}}</th>
                            <th>{{'Teams' | translate}}</th>
                            <th class="hidetd">1</th>
                            <th class="hidetd">X</th>
                            <th class="hidetd">2</th>
                            <th class="hidetd"></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-hide="futuregames.length">
                            <td></td>
                            <td>{{'There are no future games' | translate}}</td>
                        </tr>
                        <tr ng-repeat="game in futuregames = (tournament.games | orderBy: 'startDate':false | wizdom365GfIsStarted:true)">
                            <td class="hidetd">{{game.startDate | wizdom365GfFormatDate | date:'HH:mm dd/MM'}}</td>
                            <td>
                                <div class="row showHandSmall" wizdom365-faq-slide-toggle="#row_{{game.id}}">
                                    <div class="col-xs-5">
                                        <img height="11" width="16" ng-src="{{game.teamOneObj.flag}}" ng-if="game.teamOneObj.flag" /> {{game.teamOne}}
                                    </div>
                                    <div class="col-xs-2">
                                        vs.
                                    </div>
                                    <div class="col-xs-5">
                                        <img height="11" width="16" ng-src="{{game.teamTwoObj.flag}}" ng-if="game.teamTwoObj.flag" /> {{game.teamTwo}}
                                    </div>
                                </div>
                                <div class="showtd">
                                    <div id="row_{{game.id}}" class="wizdom365-faq-slideable" duration="0.5s">
                                        <b>{{'Date' | translate}}</b> : {{game.startDate | wizdom365GfFormatDate | date:'HH:mm dd/MM'}}<br />
                                        <div class="row">
                                            <div class="col-xs-4"><b>1</b></div><div class="col-xs-4"><b>X</b></div><div class="col-xs-4"><b>2</b></div>
                                        </div>
                                        <div class="row">
                                            <div class="col-xs-4">
                                                {{game.oddsTeamOne}}
                                            </div>
                                            <div class="col-xs-4">
                                                {{game.oddsDraw}}
                                            </div>
                                            <div class="col-xs-4">
                                                {{game.oddsTeamTwo}}
                                            </div>
                                        </div>
                                        <span class="showHand" ng-click="showModalGame(game)">
                                            <a href="" ng-show="game.bet.betPlaced">{{'Update bet' | translate }}</a>
                                            <a href="" ng-hide="game.bet.betPlaced">{{'Place bet' | translate}}</a>
                                        </span>
                                    </div>
                                </div>
                            </td>
                            <td class="hidetd">
                                {{game.oddsTeamOne}}
                            </td>
                            <td class="hidetd">
                                {{game.oddsDraw}}
                            </td>
                            <td class="hidetd">
                                {{game.oddsTeamTwo}}
                            </td>
                            <td class="hidetd">
                                <span class="showHand" ng-click="showModalGame(game)">
                                    <a href="" ng-show="game.bet.betPlaced">{{'Update bet' | translate }}</a>
                                    <a href="" ng-hide="game.bet.betPlaced">{{'Place bet' | translate}}</a>
                                </span>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<div class=" row">
    <div class="col-sm-12" ng-show="futureCustombets.length">
        <div class="panel panel-default">
            <div class="panel-heading">
                {{'Future special games' | translate}}
            </div>
            <div class="panel-body">
                <div class="row">
                    <div class="col-lg-12">
                        <div ng-show="!futureCustombets.length">
                            {{'There are no future special games' | translate}}
                        </div>
                    </div>
                </div>
                <table class="table table-condensed">
                    <thead>
                        <tr>
                            <th class="hidetd">{{'Date' | translate}}</th>
                            <th>{{'Question' | translate}}</th>
                            <th class="hidetd">{{'Result' | translate}}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="item in futureCustombets = (tournament.specialGames | orderBy: 'startDate':false | wizdom365GfIsStarted:true)">
                            <td class="hidetd">{{item.startDate | wizdom365GfFormatDate | date:'HH:mm dd/MM'}}</td>
                            <td>
                                <span class="showHand" wizdom365-faq-slide-toggle="#row_special_{{item.id}}">
                                    {{item.title}}
                                </span>
                                <div id="row_special_{{item.id}}" class="wizdom365-faq-slideable" duration="0.5s">
                                    <div class="showtd">
                                        <b>{{'Date' | translate}}</b>:{{item.startDate | wizdom365GfFormatDate | date:'HH:mm dd/MM'}}<br />
                                    </div>
                                    <b>{{'Possible answers' | translate}}</b>:
                                    <div class="row">
                                        <div class="col-lg-12">
                                            <ul>
                                                <li ng-repeat="option in item.bettingOptions">
                                                    <span>{{option.title}} <b>({{(option.odds).toFixed(2)}})</b></span>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="showtd">
                                        <span class="showHand" ng-click="showModalSpecialGame(item)">
                                            <a href="" ng-show="item.bet.betPlaced">{{'Update bet' | translate}}</a>
                                            <a href="" ng-hide="item.bet.betPlaced">{{'Place bet' | translate}}</a>
                                        </span>
                                    </div>
                                </div>
                            </td>
                            <td class="hidetd">
                                <span class="showHand" ng-click="showModalSpecialGame(item)">
                                    <a href="" ng-show="item.bet.betPlaced">{{'Update bet' | translate}}</a>
                                    <a href="" ng-hide="item.bet.betPlaced">{{'Place bet' | translate}}</a>
                                </span>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>