<ion-view id="app-page" ng-controller="GameCtrl" class="gamepage" ng-class="{State_Game: State_Game, State_Upload: State_Upload, State_Leaderboard: State_Leaderboard}">
    <!--<div class="bar bar-header bar-light">

        <a class="button button-assertive" ng-click="BackClick()">back</a>

        <h1 class="title scorelabel" ng-show="State_Game">{{Score}}</h1>

        <div class="title title-right timer" ng-show="State_Game">
            <div class="assertive" ng-class="{timeranimate: AnimateTimer}">{{ TimeLeft }}</div>
        </div>
        <h1 class="title title-right timer" ng-show="State_Upload">{{ Nextroundtime }}</h1>
        <h1 class="title title-right timer" ng-show="State_Leaderboard">{{ Nextroundtime }}</h1>
    </div>-->
    <ion-content class="main-numbers">

        <div class="toast-wrap">
            <div class="badgetoast toastinout" ng-repeat="badge in ShowBadges">
                <!--<a href="#/stats">-->
                <h1>Badge unlocked!</h1>
                <h2>{{badge.BadgeName}}</h2>
                <!--</a>-->
            </div>
        </div>

        <div ng-show="IsOffline" class="padding">
            <h3 class="orange text-center padding-vertical">
                Unable to connect to NumberTap server.
            </h3>
            <h4 class="orange text-center padding-vertical">
                Please check your internet connection and try again.
            </h4>
            <a class="button button-block button-play row-center" ng-click="Retry()">
                Retry
            </a>
        </div>

        <div ng-hide="IsOffline">
            <div id="game" ng-show="State_Game">
                <div ng-show="FinishedEarly" class="padding-top">
                    <div class="spinner">
                        <div class="rect1"></div>
                        <div class="rect2"></div>
                        <div class="rect3"></div>
                        <div class="rect4"></div>
                        <div class="rect5"></div>
                    </div>
                    <h3 class="positive text-center padding-horizontal">Whoa you made it to the end!</h3>
                </div>
                <div ng-hide="FinishedEarly">
                    <div class="row bar-gametop">
                        <div class="col">
                            <a class="button button-assertive" ng-click="BackClick()">back</a>
                        </div>
                        <div class="col col-center text-right">
                            <div class="game-timer" ng-class="{timeranimate: AnimateTimer}">{{ TimeLeft }}</div>
                        </div>
                    </div>
                    <div id="question-wrap" class="row row-center question-wrap">
                        <!--<div class="item">
                            <div class="question prev" ng-class="{correct: PreviousQuestion.IsCorrect, incorrect: PreviousQuestion.IsIncorrect}">{{PreviousQuestion.QuestionValue}} <span ng-show="PreviousQuestion">=</span> {{PreviousQuestion.Answered}}</div>
                        </div>-->
                        <div class="col col-center text-center" ng-class="{bonus: CurrentQuestion.IsBonus}">
                            <div class=" question current">{{CurrentQuestion.QuestionValue}}<span ng-show="CurrentQuestion">=</span></div>
                        </div>
                        <!--<div class="item">
                            <div class="question next" ng-class="{bonus: NextQuestion.IsBonus}">{{NextQuestion.QuestionValue}} <span ng-show="NextQuestion">=</span></div>
                        </div>-->
                    </div>
                    <div class="row answers-inline">
                        <div class="answer col">
                            <button class="button button-block button-answer" ng-click="Answer1Click()">{{CurrentQuestion.AllAnswers[0]}}</button>
                        </div>
                        <div class="answer col">
                            <button class="button button-block button-answer" ng-click="Answer2Click()">{{CurrentQuestion.AllAnswers[1]}}</button>
                        </div>
                        <div class="answer col">
                            <button class="button button-block button-answer" ng-click="Answer3Click()">{{CurrentQuestion.AllAnswers[2]}}</button>
                        </div>
                        <div class="answer col">
                            <button class="button button-block button-answer" ng-click="Answer4Click()">{{CurrentQuestion.AllAnswers[3]}}</button>
                        </div>
                    </div>
                    <div class="row answers-grid">
                        <div class="answer col">
                            <button class="button button-block button-answer" ng-click="Answer1Click()">{{CurrentQuestion.AllAnswers[0]}}</button>
                        </div>
                        <div class="answer col">
                            <button class="button button-block button-answer" ng-click="Answer2Click()">{{CurrentQuestion.AllAnswers[1]}}</button>
                        </div>
                    </div>
                    <div class="row answers-grid">
                        <div class="answer col">
                            <button class="button button-block button-answer" ng-click="Answer3Click()">{{CurrentQuestion.AllAnswers[2]}}</button>
                        </div>
                        <div class="answer col">
                            <button class="button button-block button-answer" ng-click="Answer4Click()">{{CurrentQuestion.AllAnswers[3]}}</button>
                        </div>
                    </div>
                </div>
            </div>
            <div id="upload" ng-show="State_Upload">
                <div class="upload-score">
                    You scored: {{LastScore}}
                </div>
                <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="uploading">
                    uploading
                </div>
                <div class="upload-stats padding-horizontal">
                    <div class="row upload-stat upload-stat-top">
                        <div class="col">Answered</div>
                        <div class="col text-right thin">{{LastQuestionsAnswered}} / 100</div>
                    </div>
                    <div class="row upload-stat">
                        <div class="col">Correct</div>
                        <div class="col text-right thin">{{LastCorrect}}%</div>
                    </div>
                    <div class="row upload-stat">
                        <div class="col">Longest Streak</div>
                        <div class="col text-right thin">{{LastLongestStreak}}</div>
                    </div>
                    <div class="row upload-stat">
                        <div class="col">Best Multiplier</div>
                        <div class="col text-right thin">{{LastBestMultiplier}}</div>
                    </div>
                    <div class="row upload-stat upload-stat-time">
                        <div class="col">Time Bonus</div>
                        <div class="col text-right thin">{{TimeBonus}}</div>
                    </div>
                </div>
            </div>
            <div id="leaderboard" ng-show="State_Leaderboard">
                <div class="row bar-gametop">
                    <div class="col">
                        <a class="button button-assertive" ng-click="BackClick()">back</a>
                    </div>
                    <div class="col col-center text-right">
                        <div class="game-timer">{{ Nextroundtime }}</div>
                    </div>
                </div>
                <div class="upload-score" ng-show="LastScore">
                    You scored: {{LastScore}}
                </div>
                <div class="padding-horizontal">
                    <div class="row scoreitem" ng-repeat="boardScore in Leaderboard.Scores">
                        <div class="col username">{{ boardScore.Rank }}. {{boardScore.Username}}</div>
                        <div class="col-20 text-right score">{{boardScore.Score}}</div>
                        <div class="col-20 text-right">
                            <div class="flag-container">
                                <div class="flag flag-{{ boardScore.LocationLower }}" title="{{ boardScore.LocationName }}"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div ng-hide="Leaderboard.Scores" class="padding">
                    <div class="spinner">
                        <div class="rect1"></div>
                        <div class="rect2"></div>
                        <div class="rect3"></div>
                        <div class="rect4"></div>
                        <div class="rect5"></div>
                    </div>
                    <h3 class="text-center padding-horizontal">Waiting for next round to start.</h3>
                    <h4></h4>
                </div>
            </div>
        </div>

    </ion-content>

    <div class="multiplier-progress" ng-show="State_Game" style="width: {{ MultiplierPercent }}%;"></div>
    <div class="bar bar-game" ng-show="State_Game">
        <div class="row row-center">
            <div class="col col-center">
                <h1>{{Score}}</h1>
            </div>
            <div class="col col-center text-right">
                <span class="multiplier">{{Multiplier}}x</span>
            </div>
            <div class="col col-center text-right">
                <span class="answered">{{ QuestionsAnswered }}/100</span>
            </div>
        </div>
    </div>
    <!--<div class="bar bar-footer bar-positive">
        <div class="title title-left" ng-show="State_Game">
            {{ QuestionsAnswered }}/100
        </div>

        <div class="title multiplier" ng-show="State_Game"><span class="energized">{{Multiplier}}x</span></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>