<ion-view >
	<ion-nav-title>
      	<span class="title_line-height">Profile</span>
    	</ion-nav-title>
	<ion-content>
		<div class="modal_view removeable profiles your_profile row"
				id="profiles"  style="margin-left: 0%">
				<div class="box">

					<div class="modal-body">
						<div>
							<div class="profile_initial">
								<div class="default picture">
									<div ng-if="imageFlag == true">
										<img src="{{imageSrc}}" class="img_landscape">
									</div>
									<div ng-if="imageFlag == false">
										<img src="images/default-user-picture.png" class="img_landscape">
									</div>
									<!--<img src="{{imageSrc}}"	class="img_landscape">-->
								</div>
								<ul>
									<li class="username">@{{username}}</li>
									<li class="activityTime" id="li_activityTime"><span
										rel="localize[player_last_move]">Last move</span>: <span
										rel="localize[about_a_minute_ago]">{{lastMove}}</span></li>
									<li class="language-played">
										<div ng-repeat="flag in userProfileData.games_by_language"> 
											<div class="flag {{flag.language}}">
												<div>{{flag.count}}</div>
											</div>
										</div>
									</li>
								</ul>
								<div class="button-container container-transluscent-light">
									<div class="buttons"></div>
								</div>
							</div>
						</div>

						<hr>
						<div class="achivements">
							<h2>
								<span rel="localize[player_achievements]">Achievements</span>
							</h2>
							<ul class="container-white">
								<li class="best">
									<span rel="localize[player_best_game]">Best	Match</span>
									<span rel="localize[player_score]">SCORE</span>
									<strong > {{userProfileData.stats.best_game_points}}</strong>
									<div class="game_flag default_flag en"></div>
								</li>	
								<li class="top">
									<span rel="localize[player_top_play]">Best Play</span> 
									<span rel="localize[player_score]">SCORE</span>
									<strong> {{userProfileData.stats.top_play}}</strong>
									<div class="game_flag default_flag en"></div>
								</li>
								<li class="longest">
									<span rel="localize[player_longest_word]">Longest Word</span>
									<strong class="ng-binding" style="">{{userProfileData.stats.longest_word}}</strong>
									<div class="game_flag default_flag en"></div>
								</li>
							</ul>
						</div>
						<div style="display: none" class="versus">
							<h2>
								<span rel="localize[player_historical]">Versus</span>
							</h2>
							<div class="container-white">
								<div class="progress active">
									<div style="width: 0%; float: left;"
										class="progress-bar progress-bar-success progress-striped"
										id="versusWinsPercent">
										<span>0</span>
									</div>
									<div style="width: 0%; float: right;"
										class="progress-bar progress-bar-danger progress-striped"
										id="versusLosesPercent">
										<span>0</span>
									</div>
								</div>
								<div class="wins">
									<span rel="localize[you_won]">You Won!</span>
								</div>
								<div class="loss">
									<span rel="localize[you_lost]">¡You Lost!</span>
								</div>
							</div>
						</div>

						<div class="performance" >
							<h2>
								<span rel="localize[player_performance]">Performance</span>
							</h2>
							<div class="container-white">
								<ul class="unstyled hz">
									<li class="won">
										<div id="div_won">{{userProfileData.stats.games_won}}</div>
										<span><span rel="localize[player_won_games]">Won</span></span>
									</li>
									<li class="lost">
										<div id="div_lost">{{userProfileData.stats.games_played
											- userProfileData.stats.games_won}}</div>
										<span> <span rel="localize[player_lost_games]">Lost</span></span>
									</li>
									<li lang-code="null" class="resigned">
										<div id="div_resign">{{resignedGames}}%</div>
										<span><span rel="localize[player_resigned_games]">Resigned</span></span>
									</li>
								</ul>
							</div>
						</div>
						<hr>
					</div>
				</div>
			</div>

	</ion-content>
</ion-view>

