
<ion-view >
	<ion-nav-title>
      		<img alt="logo" src="images/login/botones/aworded_white.png" class="img-responsive" id="menu-aworded-img">
    </ion-nav-title>
	<ion-nav-buttons side="right"	>  
        <span class="icon chat chatLink" ng-click="chatOption()"></span>
	</ion-nav-buttons>
	<ion-content>
	<ion-refresher pulling-text="Release to refresh..." on-refresh="doRefresh()" style="background-color:#6FBFFB"></ion-refresher>
		<div class="container-fluid" ng-init="loadData()">

<div class="row"
	id="coin-info-buy">
	<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 padding-left-zero">
		<div class="game-header" style="margin-left: 21%">
			<div id="menu" class="btn-group">
				<button class="btn  token-bar" ng-click="moveToShopPage()"
					id="shop-coin">
					<i class="icon-coins" style="padding-left: 40px;">{{profileData.coins}}</i><!--<span class="coins_amount ng-binding"></span>-->
				</button>
			</div>
		</div>
	</div>
	<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" id="buy-coin-text">Buy more coins!</div>
	<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3" style="text-align:right;">
		<button class="btn btn-success" id="shop-btn"	ng-click="moveToShopPage()">Shop</button>
	</div>
</div>
<div class="row margin-left-right" >
	<!--<div class="play_bar top">
		<button class="bar_button new_game enabled"
			ng-click="showNewGamePopup()">
			<span class="icon new"></span> <span class="button_description"><span
				rel="localize[new_game]">New game</span></span>
		</button>
	</div>-->
	<div id="game_list">
	<div style="text-align:center">
	<button class="btn" id="play-now-btn" ng-click="showNewGamePopup()"><span id="play-now-font">Play now</span></button>
	</div>
		<div id="customScrollBox" 
			class="nano has-scrollbar"> 
			<div tabindex="0" class="content">
				<div class="game_selector">
					<div id="game_list_container" class="list">
					<div ng-show="myturnFlag">
						<div class="section_title not-collapsed">
							<h5>
								<span rel="localize[your_move]">your turn</span> 
								<span class="collapse-tooltip" title="Haga clic para cerrar"></span>
							</h5>
						</div>
						<ul class="section my-turn not-collapsed">
							<li class="expand-text"><span
								rel="localize[click_to_expand]">Click to Expand</span></li>
							<li
								class="game gameid_{{gameslist.id}} opponentid_{{gameslist.opponentId}}"
								ng-repeat="gameslist in listdata"
								ng-if="gameslist.my_turn == true && gameslist.game_status == 'ACTIVE'"
								ng-click="perticularGameLoading(gameslist.id)">
								<!-- <div ng-if="gameslist.game_status == 'ACTIVE' "> -->
								<div class="container">
									<div class="messages_alert hidden"></div>
									<div class="opponent_photo">
										<div data-user-id="{{gameslist.id}}"
											class="user_picture photo">
											<div ng-if="gameslist.imgFlag == true">
											<img src="{{gameslist.imageSrc}}">
											</div>
											<div ng-if="gameslist.imgFlag == false">
											<img src="images/default-user-picture.png">
											</div>  <!--width="50" height="50"-->
										</div>
									</div>
									<div data-game-id="{{gameslist.id}}" class="information">
										<div class="game_with">
											<span class="name">{{gameslist.username}}</span>
										</div>
										<div id="ACTIVE0" class="game_active">
											<span rel="localize[played] options[]">Last Move</span>
											'{{gameslist.lastMoved}}'
										</div>
										<div class="game_description second">
											<span rel="localize[about_a_minute_ago] options[capitalize]">MINUTE
												AGO</span> <br>
										</div>
										<div>
											<div class="game_language en" ></div>
											<div class="start_date">
												<span rel="localize[x_minutes_ago] arguments[2] options[]">2
													minutes ago</span>
											</div>

											<div class="remaining-tiles"><span>{{gameslist.remaining_tiles}} tiles remaining</span></div>
									<!--		<div class="tiles_left">{{gameslist.remaining_tiles}} tiles remaining</div>-->

										</div>
									</div>
								</div>

							</li>


							<li
								class="game gameid_{{gameslist.id}} opponentid_{{gameslist.opponentId}}"
								ng-repeat="gameslist in listdata"
								ng-if="gameslist.game_status == 'PENDING_FIRST_MOVE'"
								ng-click="perticularGameLoading(gameslist.id)">
								<div ng-if="gameslist.my_turn == true">
									<div class="container">

										<div class="messages_alert hidden"></div>
										<div class="opponent_photo">
											<div data-user-id="{{gameslist.id}}"
												class="user_picture photo">
												
												<div ng-if="gameslist.imgFlag == true">
												<img src="{{gameslist.imageSrc}}">
												</div>
												<div ng-if="gameslist.imgFlag == false">
												<img src="images/default-user-picture.png">
												</div>
											</div>
										</div>
										<div data-game-id="{{gameslist.id}}" class="information">
											<div class="game_with">
												<span class="name">{{gameslist.username}}</span>
											</div>
											<div id="ACTIVE1" class="game_active">
												<span rel="localize[played] options[]">Last Move</span>
												'{{gameslist.lastMoved}}'
											</div>
											<div class="game_description second">
												<span rel="localize[about_a_minute_ago] options[capitalize]">MINUTE
													AGO</span> <br>
											</div>
											<div>
												<div class="game_language en" ></div>
												<div class="start_date">
													<span rel="localize[x_minutes_ago] arguments[2] options[]">2
														minutes ago</span>
												</div>

												<div class="remaining-tiles"><span>{{gameslist.remaining_tiles}} tiles remaining</span></div>
												<!--<div class="tiles_left">{{gameslist.remaining_tiles}}</div>-->

											</div>
										</div>
									</div>
								</div>
							</li>
							<li
								class="game gameid_{{gameslist.id}} opponentid_{{gameslist.opponentId}}"
								ng-repeat="gameslist in listdata"
								ng-if="gameslist.game_status == 'PENDING_MY_APPROVAL' "
								ng-click="perticularGameLoading(gameslist.id)">
								<div ng-if="gameslist.my_turn == true">
									<div class="container">

										<div class="messages_alert hidden"></div>
										<div class="opponent_photo">
											<div data-user-id="{{gameslist.id}}"
												class="user_picture photo">
												<div ng-if="gameslist.imgFlag == true">
												<img src="{{gameslist.imageSrc}}">
												</div>
												<div ng-if="gameslist.imgFlag == false">
												<img src="images/default-user-picture.png">
												</div>
											</div>
										</div>
										<div data-game-id="{{gameslist.id}}" class="information">
											<div class="game_with">
												<span class="name">{{gameslist.username}}</span>
											</div>
											<div id="ACTIVE2" class="game_active">
												<span rel="localize[played] options[]">Last Move</span>
												'{{gameslist.lastMoved}}'
											</div>
											<div class="game_description second">
												<span rel="localize[about_a_minute_ago] options[capitalize]">MINUTE
													AGO</span> <br>
											</div>
											<div>
												<div class="game_language en" ></div>
												<div class="start_date">
													<span rel="localize[x_minutes_ago] arguments[2] options[]">2
														minutes ago</span>
												</div>

												<div class="remaining-tiles"><span>{{gameslist.remaining_tiles}} tiles remaining</span></div>
												<!--<div class="tiles_left">{{gameslist.remaining_tiles}}</div>-->

											</div>
										</div>
									</div>
								</div>
							</li>


							</li>
						</ul>
						</div>
						<!-- Opponant Approval -->
						<div ng-show="frndApproFlag">
						<div class="section_title pending not-collapsed">
							<h5>
								<span rel="localize[awaiting_approval]">waiting for
									Approval</span>
									<!--<span class="collapse-tooltip"
									title="Haga clic para cerrar"></span>-->
							</h5>
						</div>
						<ul class="section not-collapsed">
							<li class="expand-text"><span
								rel="localize[click_to_expand]"> Click to display</span></li>
							<li class="game gameid_{{gameslist.id}} opponentid_0 "
								ng-repeat="gameslist in listdata"
								ng-if="gameslist.game_status == 'PENDING_FRIENDS_APPROVAL'"
								ng-click="perticularGameLoading(gameslist.id)">
								<div class="container">
									<div class="messages_alert hidden"></div>
									<div class="opponent_photo">
										<div style="font-size: 50px; width: 50px; height: 50px;"
											class="tile size50 user_picture">
											<div class="index" style="display: none"></div>
											<div id="letterTileContainer" class="letter random-opponent">?</div>
										</div>
									</div>
									<div class="information" data-game-id="{{gameslist.id}}">
										<div class="game_with">
											<span class="name"><span
												rel="localize[button_random_opponent]">Random
													opponent</span></span>
										</div>
										<div class="game_description first"
											id="PENDING_FRIENDS_APPROVAL">
											<span rel="localize[awaiting_opponent]">waiting for
												opponent</span>
										</div>
										<div class="game_description second">
											<span rel="localize[you_played] options[]">You played</span>
											'{{gameslist.lastMoved}}' <br>
										</div>
										<div>
											<div  class="game_language en"></div>
											<div class="start_date">
												<span rel="localize[a_moment_ago] options[]">a moment
													ago</span>
											</div>
											<div class="remaining-tiles"><span>{{gameslist.remaining_tiles}} tiles remaining</span></div>
											<!--<div class="tiles_left">{{gameslist.remaining_tiles}}</div>-->
										</div>
									</div>

								</div>
							</li>
						</ul>
						</div>
						<!-- Their turn List -->
						<div ng-show="oppturnFlag">
						<div class="section_title your-turn not-collapsed">
							<h5>
								<span rel="localize[their_move]">Their turn</span><span
									class="collapse-tooltip" title="Haga clic para cerrar"></span>
							</h5>
						</div>
						<ul class="section not-collapsed">
							<li class="expand-text"><span
								rel="localize[click_to_expand]">Click to display</span></li>
							<li
								class="game gameid_{{gameslist.id}} opponentid_{{gameslist.opponent.id}} "
								ng-repeat="gameslist in listdata"
								ng-if="gameslist.game_status == 'ACTIVE' && gameslist.my_turn == false"
								ng-click="perticularGameLoading(gameslist.id)">
								<!-- <div ng-if="gameslist.my_turn == false"> -->
								<div class="container">
									<div style="display: none;" class="messages_alert hidden"></div>
									<div class="opponent_photo">
										<div class="user_picture photo" data-user-id="{{gameslist.id}}">
											<div ng-if="gameslist.imgFlag == true">
											<img src="{{gameslist.imageSrc}}">
											</div>
											<div ng-if="gameslist.imgFlag == false">
											<img src="images/default-user-picture.png">
											</div>
										</div>
									</div>
									<div class="information" data-game-id="{{gameslist.id}}">
										<div class="game_with">
											<span class="name">{{gameslist.username}}</span>
										</div>

										<div class="game_description second">
											<span rel="localize[a_moment_ago] options[capitalize]">{{gameslist.opponent.facebook_name}}
												MOMENT(S) AGO</span> <br>
										</div>
										<div>
											<div  class="game_language en"></div>
											<div class="start_date">
												<span rel="localize[x_minutes_ago] arguments[6] options[]">
													6 minutes ago</span>
											</div>

											<div class="remaining-tiles"><span>{{gameslist.remaining_tiles}} tiles remaining</span></div>
											<!--<div class="tiles_left">{{gameslist.remaining_tiles}} tiles remaining</div>-->

										</div>
									</div>

								</div>

							</li>
						</ul>
						</div>
						<!-- Game over list division -->
						<div ng-show="endFlag">
						<div class="section_title game-over not-collapsed">
							<h5>
								<span rel="localize[game_over]">Finished Games</span> 
								<!--<span id="delete-icon"></span>-->
								<!--<span class="collapse-tooltip" title="Haga clic para cerrar"></span>-->
							</h5>
						</div>
						<ul class="section game_over not-collapsed">
							<li class="expand-text"><span
								rel="localize[click_to_expand]">Click to Expand</span></li>
							<li class="trash-container" style="display: none;">
								<button id="trash_game_over" class="btn-gray"></button>
							</li>

							<li
								class="game gameid_{{gameslist.id}} opponentid_{{gameslist.opponentId}}"
								ng-repeat="gameslist in listdata"
								ng-if="gameslist.game_status == 'ENDED'">
								
								<div class="container">
									<div class="messages_alert hidden"></div>
									<div class="opponent_photo">
										<div class="user_picture photo"
											data-user-id="{{gameslist.opponentId}}">
											<div ng-if="gameslist.imgFlag == true">
											<img src="{{gameslist.imageSrc}}">
											</div>
											<div ng-if="gameslist.imgFlag == false">
											<img src="images/default-user-picture.png">
											</div>
										</div>
									</div>
									<div class="information"
										ng-click="perticularGameLoading(gameslist.id)"
										data-game-id="{{gameslist.id}}">
										<div class="game_with">
											<span class="name">{{gameslist.username}}</span>
										</div>
										<div class="game_ended" id="ENDED"></div>
										<div class="game_description second">
											<span rel="localize[the_game_has_expired]">The game
												has expired!</span> <br>
										</div>
										<div>
											<div  class="game_language en"></div>
											<div class="start_date">Finished
												<span rel="localize[x_days_ago] arguments[9] options[]">1 day ago
													<!-- hace 9 dias -->
												</span>
											</div>
											<div class="remaining-tiles"><span>{{gameslist.remaining_tiles}} tiles remaining</span></div>
											
											<!--<div class="game-clock game_{{gameslist.id}}">
												<span class="min-sec"></span>
											</div>-->
										</div>
									</div>
								</div>
							</li>
						</ul>
						</div>
					</div>
				</div>
			</div>
			<div  class="pane">
				<div style="height: 483px; transform: translate(0px, 0px);"
					class="slider"></div>
			</div>
		</div>
		<div style="display: none;" class="loading_view">
			<div class="inside">
				<img src="images/loading_image.gif">

				<div class="caption"></div>
			</div>
		</div>
	</div>
</div>
</div>
	</ion-content>
</ion-view>


