<ion-view id="app-page" ng-controller="HomeCtrl">
    <!--<div class="bar bar-header bar-light">

        <img id="title-logo" src="img/logo-dark.png" />

        <h1 class="title title-left" style="padding-left: 35px;">

            <span><strong class="positive">NUMBER</strong>TAP</span>
        </h1>
    </div>-->
    <ion-content class="main-numbers" padding="false">

        <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 class="row text-center padding">
            <h1 class="hometitle">
                <img id="title-logo" src="img/logo-dark.png" />
                <span class="blue">NUMBER</span>
                <span>TAP</span>
            </h1>
        </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 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 class="ng-hide" ng-hide="IsLoading">
                <div class="row">
                    <h3 class="col orange text-center">Hi {{Login.Player.Username}}!</h3>
                </div>
                <div id="play-wrap" class="row row-center padding-horizontal">
                    <div class="col">
                        <a class="button button-block button-play" href="#/game">
                            Play now
                        </a>
                    </div>
                    <!--<div class="col-update" ng-show="IsUpdateAvailable">
                        <a class="button button-block button-energized" href="http://numbertap.com/android/download">
                            Update
                        </a>
                    </div>-->
                </div>
                <div class="row text-center playersonline">
                    <div class="col">
                        {{Login.Stats.PlayersOnlineDisplay}}
                    </div>
                </div>
                <div class="blue-bg homecard padding">
                    <div class="row text-center">
                        <div class="col text-left">Games</div>
                        <div class="col thin text-right">{{Login.Player.GamesPlayed}}</div>
                    </div>
                    <div class="row text-center linerow" ng-show="Login.Player.DailyRank">
                        <div class="col text-left">Daily rank</div>
                        <div class="col thin text-right">{{Login.Player.DailyRank}}</div>
                    </div>
                    <div class="row text-center linerow" ng-show="Login.Player.WeeklyRank">
                        <div class="col text-left">Weekly rank</div>
                        <div class="col thin text-right">{{Login.Player.WeeklyRank}}</div>
                    </div>
                    <div class="button-bar homemenu padding-horizontal">
                        <a class="button button-homemenu" href="#/stats">My Stats</a>
                        <a class="button button-homemenu" href="#/leaderboards">Leaderboard</a>
                        <a class="button button-homemenu" href="#/settings">Settings</a>
                    </div>
                </div>
            </div>
        </div>
    </ion-content>
    <!--<div class="bar bar-footer">
        <div class="title title-left">
        </div>
        <div class="title title-right">
            <a class="sociallink" href="https://www.facebook.com/NumberTap">
                <img src="img/appbar.social.facebook.variant.png" width="42" height="42" />
            </a>
            <a class="sociallink" href="https://twitter.com/numbertap">
                <img src="img/appbar.social.twitter.png" width="42" height="42" />
            </a>
        </div>
    </div>-->
</ion-view>