<ion-view id="app-page" ng-controller="StatsCtrl">
    <div class="bar bar-header bar-light">
        <a class="button button-assertive" ng-click="BackClick()">back</a>
        <h1 class="title" ng-show="Stats">Stats</h1>
        <h1 class="title" ng-show="Badges">Badges</h1>
        <h1 class="title title-right" style="padding-left: 35px;">
            <img id="title-logo" src="img/logo-dark.png" />
            <span class="blue">NUMBER</span>
            <span>TAP</span>
        </h1>
    </div>
    <ion-content class="has-header has-footer main-numbers" padding="false">
        <div>
            <div ng-show="IsLoading">
                <div class="spinner">
                    <div class="rect1"></div>
                    <div class="rect2"></div>
                    <div class="rect3"></div>
                    <div class="rect4"></div>
                    <div class="rect5"></div>
                </div>
                <div class="home-loading">
                    loading
                </div>
            </div>

            <div ng-show="Stats" ng-hide="IsLoading">
                <div class="stats padding-horizontal">
                    <div class="row stat-item stat-item-top" ng-show="PlayerStats.DailyRank">
                        <div class="col">Daily Rank</div>
                        <div class="col text-right thin">{{PlayerStats.DailyRank}}</div>
                    </div>
                    <div class="row stat-item" ng-show="PlayerStats.WeeklyRank">
                        <div class="col">Weekly Rank</div>
                        <div class="col text-right thin">{{PlayerStats.WeeklyRank}}</div>
                    </div>
                    <div class="row stat-item">
                        <div class="col">Games Played</div>
                        <div class="col text-right thin">{{PlayerStats.GamesPlayed}}</div>
                    </div>
                    <div class="row stat-item">
                        <div class="col">Best Score</div>
                        <div class="col text-right thin">{{PlayerStats.HighestScore}}</div>
                    </div>
                    <div class="row stat-item">
                        <div class="col">Total Answered</div>
                        <div class="col text-right thin">{{PlayerStats.QuestionsAnswered}}</div>
                    </div>
                    <!--<div class="row upload-stat">
                <div class="col">Most Correct Answers</div>
                <div class="col text-right thin">{{PlayerStats.MostCorrectAnswers}}</div>
            </div>
            <div class="row upload-stat">
                <div class="col">Most Wrong Answers</div>
                <div class="col text-right thin">{{PlayerStats.MostWrongAnswers}}</div>
            </div>-->
                </div>
            </div>
            <div ng-show="Badges">
                <div class="badges padding-bottom padding-horizontal">
                    <div class="row badge-item" ng-repeat="badge in PlayerBadges">
                        <div class="badge-icon" ng-class="{Achieved: badge.Achieved}"></div>
                        {{ badge.BadgeName }}
                    </div>
                </div>
            </div>
        </div>
    </ion-content>
    <div class="tabs tabs-blue">
        <a class="tab-item" ng-click="StatsClick()" ng-class="StatsButton">
            Stats
        </a>
        <a class="tab-item" ng-click="BadgesClick()" ng-class="BadgesButton">
            Badges
        </a>
    </div>
    <!--<div class="bar bar-footer bar-positive">
        <div class="title">
        </div>
        <div class="title title-right">
            <a href="https://www.facebook.com/NumberTap">
                <img src="img/appbar.social.facebook.variant.png" width="42" height="42" />
            </a>
            <a href="https://twitter.com/numbertap">
                <img src="img/appbar.social.twitter.png" width="42" height="42" />
            </a>
        </div>
    </div>-->

</ion-view>