<div ng-init="init.view()">
    <div ng-if="contestIsLoading">
        <div class="panel panel-default">
            <div class="panel-heading"><h4>Loading</h4></div>
            <div class="panel-body">Loading... please wait.</div>
        </div>
    </div>
    <div class="row" ng-if="!contestIsLoading">
        <div class="col-xs-12">
            <div class="page-title page-header">
                <h1 class="h3" ng-bind="contest.name"></h1>
            </div>
            <div ng-if="player.place == 1 && contest.status == 0" class="jumbotron">
                <h3>Congratulations!</h3>
                <p>You are the winner of this contest!</p>
                <p>
                    <button class="btn" ng-click="modalMixturesActions.show()">Points Breakdown</button>
                    <button class="btn btn-info" ng-click="modalRankingsActions.show()">See How Other Players Rank</button>
                </p>
            </div>
            <div ng-if="player.place > 1 && contest.status == 0" class="jumbotron">
                <h3>Congratulations!</h3>
                <p>You ranked <span ng-bind="player.place"></span> in contest!</p>
                <p>
                    <button class="btn" ng-click="modalMixturesActions.show()">Points Breakdown</button>
                    <button class="btn btn-info" ng-click="modalRankingsActions.show()">See How Other Players Rank</button>
                </p>
            </div>
        </div>
        <div class="col-sm-8">
            <div class="panel panel-slash-primary">
                <div class="panel-heading">
                    <h4>Players</h4>
                </div>
                <div class="panel-body">
                    <ul class="avatar-list">
                        <li ng-repeat="player in players.items">
                            <a href="#"><img ng-src="{{ player.player.avatar.path }}" alt="Avatar"> {{ player.player.username }}</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="panel panel-slash-primary">
                <div class="panel-heading">
                    <h4>Leaderboard</h4>
                </div>
                <table class="table table-bordered table-rankings">
                    <thead>
                        <tr>
                            <th class="place">Place</th>
                            <th>Name</th>
                            <th class="points">Points</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="slot in rankings.items">
                            <td class="place" ng-bind="slot.place">Place</td>
                            <td><img ng-src="{{ slot.player.avatar.path }}" width="32" height="32"> {{ slot.player.fullName.clerical }}</td>
                            <td class="points" ng-bind="slot.totalPoints">Points</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="panel panel-slash-secondary">
                <div class="panel-heading">
                    <h4>Invite/Challenge</h4>
                </div>
                <div class="panel-body">
                    <ul class="social-list">
                        <li>
                            <a href="#"><img src="<?php $this->basePath(); ?>/assets/img/sm-circ-facebook.png" alt="Facebook"></a>
                        </li>
                        <li>
                            <a href="#"><img src="<?php $this->basePath(); ?>/assets/img/sm-circ-instagram.png" alt="Instagram"></a>
                        </li>
                        <li>
                            <a href="#"><img src="<?php $this->basePath(); ?>/assets/img/sm-circ-twitter.png" alt="Twitter"></a>
                        </li>
                    </ul>
                    <img style="width: 100%" src="<?php $this->basePath(); ?>/assets/img/beat-placeholder.png" alt="Cleaveland beats Devnver">
                </div>
            </div>
            <div class="standings-widget">
                <p>Remix a better schedule</p>
                <p class="standings-box"><a ng-click="scrollTo('standings')"><img src="<?php $this->basePath(); ?>/assets/img/image-standings.png"></a></p>
            </div>
        </div>
    </div>
    <div class="row" ng-if="!contestIsLoading">
        <div class="col-xs-6">
            <div class="panel panel-dark-slash-primary">
                <div class="panel-heading">
                    <h4>Real World Games</h4>
                </div>
                <ul class="list-group">
                    <li class="list-group-item text-center list-group-title">
                        <div class="container-fluid">
                            <div class="row">
                                <div class="col-xs-5">
                                    <h5>Home</h5>
                                </div>
                                <div class="col-xs-5">
                                    <h5>Away</h5>
                                </div>
                                <div class="col-xs-2">
                                    <h5 bs-tooltip title="Divisional Match-Up">Div. Match</h5>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li ng-repeat="schedule in models.matches" class="list-group-item">
                        <div class="container-fluid">
                            <div class="row">
                                <div class="col-xs-5">
                                    <ul class="team-container team-container-home">
                                        <li ng-repeat="team in models.matches[$index].home" class="team" ng-class="{ 'team-home': team.type == 'home', 'team-away': team.type == 'away'}">
                                            <span ng-bind="team.name"></span>
                                        </li>
                                    </ul>
                                </div>
                                <div class="col-xs-5">
                                    <ul class="team-container team-container-away">
                                        <li ng-repeat="team in models.matches[$index].away" class="team" ng-class="{ 'team-home': team.type == 'home', 'team-away': team.type == 'away'}">
                                            <span ng-bind="team.name"></span>
                                        </li>
                                    </ul>
                                </div>
                                <div class="col-xs-2">
                                    <ul class="team-container team-container-attr">
                                        <li ng-repeat="team in models.matches[$index].away" class="team team-attr">
                                            <span ng-if="schedule.home[0].group == schedule.away[0].group" class="btn btn-xs btn-info" bs-tooltip title="Divisional Match-Up"><i class="fa fa-fw fa-info"></i></span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="panel panel-dark-slash-secondary">
                <div class="panel-heading">
                    <h4>Your Remix</h4>
                </div>
                <ul class="list-group">
                    <li class="list-group-item text-center list-group-title">
                        <div class="container-fluid">
                            <div class="row">
                                <div class="col-xs-5">
                                    <h5>Home</h5>
                                </div>
                                <div class="col-xs-5">
                                    <h5>Away</h5>
                                </div>
                                <div class="col-xs-2">
                                    <h5 bs-tooltip title="Divisional Match-Up">Div. Match</h5>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li ng-repeat="schedule in models.mixes" class="list-group-item">
                        <div class="container-fluid">
                            <div class="row">
                                <div class="col-xs-5">
                                    <ul class="team-container team-mixes team-container-home">
                                        <li ng-repeat="team in models.mixes[$index].home" class="team" ng-class="{ 'team-home': team.type == 'home', 'team-away': team.type == 'away'}">
                                            <span ng-bind="team.name"></span>
                                            <span class="bet btn btn-xs" ng-if="schedule.bet.id == team.id" bs-tooltip="{ title: 'Your pick as winner' }"><img class="icon-winner" alt="W" src="<?php $this->basePath(); ?>/assets/img/icon-win.png"></span>
                                        </li>
                                    </ul>
                                </div>
                                <div class="col-xs-5">
                                    <ul class="team-container team-mixes team-container-away">
                                        <li ng-repeat="team in models.mixes[$index].away" class="team" ng-class="{ 'team-home': team.type == 'home', 'team-away': team.type == 'away'}">
                                            <span ng-bind="team.name"></span>
                                            <span class="bet btn btn-xs" ng-if="schedule.bet.id == team.id" bs-tooltip="{ title: 'Your pick as winner' }"><img class="icon-winner" alt="W" src="<?php $this->basePath(); ?>/assets/img/icon-win.png"></span>
                                        </li>
                                    </ul>
                                </div>
                                <div class="col-xs-2">
                                    <ul class="team-container team-mixes team-container-attr">
                                        <li class="team team-attr">
                                            <span ng-if="schedule.home[0].group == schedule.away[0].group" bs-tooltip title="Divisional Match-Up" class="btn btn-xs btn-info"><i class="fa fa-fw fa-info"></i></span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="col-xs-12">
            <div class="panel panel-slash-primary" id="standings">
                <div class="panel-heading">
                    <h4>Current Standings</h4>
                </div>
                <div class="panel-body">
                    <div class="col-sm-6">
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>{{ standings.items['nfc-east'].info.name }}</th>
                                    <th class="score">W</th>
                                    <th class="score">L</th>
                                    <th class="score">T</th>
                                    <th class="score">PCT</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr ng-repeat="team in standings.items['nfc-east'].teams">
                                    <td>{{ team.team.name }}</td>
                                    <td class="score">{{ team.wins }}</td>
                                    <td class="score">{{ team.losses }}</td>
                                    <td class="score">{{ team.ties }}</td>
                                    <td class="score">{{ team.percentage }}</td>
                                </tr>
                            </tbody>
                        </table>

                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>{{ standings.items['nfc-north'].info.name }}</th>
                                    <th class="score">W</th>
                                    <th class="score">L</th>
                                    <th class="score">T</th>
                                    <th class="score">PCT</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr ng-repeat="team in standings.items['nfc-north'].teams">
                                    <td>{{ team.team.name }}</td>
                                    <td class="score">{{ team.wins }}</td>
                                    <td class="score">{{ team.losses }}</td>
                                    <td class="score">{{ team.ties }}</td>
                                    <td class="score">{{ team.percentage }}</td>
                                </tr>
                            </tbody>
                        </table>

                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>{{ standings.items['nfc-south'].info.name }}</th>
                                    <th class="score">W</th>
                                    <th class="score">L</th>
                                    <th class="score">T</th>
                                    <th class="score">PCT</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr ng-repeat="team in standings.items['nfc-south'].teams">
                                    <td>{{ team.team.name }}</td>
                                    <td class="score">{{ team.wins }}</td>
                                    <td class="score">{{ team.losses }}</td>
                                    <td class="score">{{ team.ties }}</td>
                                    <td class="score">{{ team.percentage }}</td>
                                </tr>
                            </tbody>
                        </table>

                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>{{ standings.items['nfc-west'].info.name }}</th>
                                    <th class="score">W</th>
                                    <th class="score">L</th>
                                    <th class="score">T</th>
                                    <th class="score">PCT</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr ng-repeat="team in standings.items['nfc-west'].teams">
                                    <td>{{ team.team.name }}</td>
                                    <td class="score">{{ team.wins }}</td>
                                    <td class="score">{{ team.losses }}</td>
                                    <td class="score">{{ team.ties }}</td>
                                    <td class="score">{{ team.percentage }}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="col-sm-6">
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>{{ standings.items['afc-east'].info.name }}</th>
                                    <th class="score">W</th>
                                    <th class="score">L</th>
                                    <th class="score">T</th>
                                    <th class="score">PCT</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr ng-repeat="team in standings.items['afc-east'].teams">
                                    <td>{{ team.team.name }}</td>
                                    <td class="score">{{ team.wins }}</td>
                                    <td class="score">{{ team.losses }}</td>
                                    <td class="score">{{ team.ties }}</td>
                                    <td class="score">{{ team.percentage }}</td>
                                </tr>
                            </tbody>
                        </table>

                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>{{ standings.items['afc-north'].info.name }}</th>
                                    <th class="score">W</th>
                                    <th class="score">L</th>
                                    <th class="score">T</th>
                                    <th class="score">PCT</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr ng-repeat="team in standings.items['afc-north'].teams">
                                    <td>{{ team.team.name }}</td>
                                    <td class="score">{{ team.wins }}</td>
                                    <td class="score">{{ team.losses }}</td>
                                    <td class="score">{{ team.ties }}</td>
                                    <td class="score">{{ team.percentage }}</td>
                                </tr>
                            </tbody>
                        </table>

                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>{{ standings.items['afc-south'].info.name }}</th>
                                    <th class="score">W</th>
                                    <th class="score">L</th>
                                    <th class="score">T</th>
                                    <th class="score">PCT</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr ng-repeat="team in standings.items['afc-south'].teams">
                                    <td>{{ team.team.name }}</td>
                                    <td class="score">{{ team.wins }}</td>
                                    <td class="score">{{ team.losses }}</td>
                                    <td class="score">{{ team.ties }}</td>
                                    <td class="score">{{ team.percentage }}</td>
                                </tr>
                            </tbody>
                        </table>

                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>{{ standings.items['afc-west'].info.name }}</th>
                                    <th class="score">W</th>
                                    <th class="score">L</th>
                                    <th class="score">T</th>
                                    <th class="score">PCT</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr ng-repeat="team in standings.items['afc-west'].teams">
                                    <td>{{ team.team.name }}</td>
                                    <td class="score">{{ team.wins }}</td>
                                    <td class="score">{{ team.losses }}</td>
                                    <td class="score">{{ team.ties }}</td>
                                    <td class="score">{{ team.percentage }}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>