{% load i18n %}<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>{% trans 'Saboteur: HK Universal Suffrage Edition.' %}</title>
	<link rel="stylesheet" href="{{ STATIC_URL }}jquery/ui/css/smoothness/jquery-ui-1.10.3.custom.min.css">
	<link rel="stylesheet" href="{{ STATIC_URL }}jquery/mobile/jquery.mobile-1.3.1.min.css">
	<link rel="stylesheet" href="{{ STATIC_URL }}global/css/base.css">
	<meta name="viewport" content="width=480, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<script type="text/javascript">
		window.CARDS = {{ cards|safe }};
		window.INIT_MAP = {{ maps|safe }};
		window.CHARS = {{ characters|safe }};
		window.CSRF = '{{ csrf_token }}';
		window.ROOM = '{{ room.id_hash }}';
		window.ERRORS = {
			'blocked': '{% trans "You are being blocked" %}',
			'not_in_turn': '{% trans "It is not your turn" %}'
		};
	</script>
</head>
<body>
	{% if not room.started %}
	<div data-role="page" id="waitingForGamePage">
		<div data-role="header">
			<h3>{% blocktrans %}Room #{{ room }}{% endblocktrans %}</h3>
			<a href="#" data-role="button" data-icon="delete" data-iconpos="left" class="quitRoomBtn">{% trans "Quit Room" %}</a>
			<a href="{{ qrcode }}" target="_blank" data-role="button" data-icon="arrow-r" data-iconpos="right">{% trans "QR code" %}</a>
		</div>
		<div data-role="content">
			<div style="width:320px;margin: 0 auto; text-align:center; padding: 0">
				<p>{% trans "The game is not yet start.<br>Tell your friends to join!!" %}</p>
				<p><a href="mailto:?subject=Saboteur HK Edition&amp;body={{ room_url }}" data-role="button" target="_blank">{% trans "Email!" %}</a></p>
				<p>{% trans '<span class="gameRoomMemberNumber">0</span> player(s) in this room.' %}</p>
				{% if request.player.position == 1 %}
				<button data-role="button" class="startGameBtn" disabled="disabled" data-theme="b">{% trans "Start Game" %}</button>
				{% endif %}
			</div>
		</div>
	</div>
	{% endif %}

	<div data-role="page" id="mainActionPage">
		<div data-role="header">
			<h3>{% blocktrans %}Room #{{ room }}{% endblocktrans %} - {{ request.player.name }}</h3>
		</div>
		<div data-role="content" id="mainActionContent">
			<div class="mobile-row">
				<div id="myRoleCover"><img src="{{ STATIC_URL }}games/images/characters/back.jpg"></div>
				<div id="myRole"></div>
				<div id="actionsAreaWrapper">
					<div id="actionsArea">
						<div class="action-area" id="playCardAction">{% trans "Play card" %}</div>
						<div class="action-area" id="discardAction">{% trans "Discard" %}</div>
						<div class="action-area" id="drawCardAction"><div style="margin-top: 40px; line-height: 20px;">
							{% trans "Cards Deck" %}<br>
							{% trans 'left #<span class="cards-deck-left">0</span>' %}
						</div></div>
					</div>
				</div>
			</div>
			<div class="mobile-row">
				<ul id="myCards"></ul>
				<button data-role="button" class="passBtn" data-theme="b">{% trans "Pass" %}</button>
			</div>
		</div>
	</div>
	<div data-role="page" id="gameMapPage">
		<div data-role="header">
			<h3>{% trans "Game Map" %}</h3>
			<a data-role="button" data-direction="reverse" href="#" class="backToMainBtn" data-icon="arrow-l" data-iconpos="left">{% trans "Back" %}</a></div>
			<div data-role="content" style="padding: 0 50px;">
				{% include "games/map.html" %}
			</div>
		</div>
	</div>
	<div data-role="page" id="playersPage">
		<div data-role="header">
			<h3>{% trans "Players" %}</h3>
			<a data-role="button" data-direction="reverse" href="#" class="backToMainBtn" data-icon="arrow-l" data-iconpos="left">{% trans "Back" %}</a>
		</div>
		<div data-role="content">
			<ul id="playerList" class="unstyled">
				<li class="player-div" data-position="1"></li>
				<li class="player-div" data-position="2"></li>
				<li class="player-div" data-position="3"></li>
				<li class="player-div" data-position="4"></li>
				<li class="player-div" data-position="5"></li>
				<li class="player-div" data-position="6"></li>
			</ul>
		</div>
	</div>

	<div data-role="dialog" id="badGuyWinPage">
		<div data-role="header">
			<h3>{% trans "Bad Guys Win" %}</h3>
		</div>
		<div data-role="content">
			<p class="game-result"></p>
			{% if request.player.position == 1 %}
			<button data-role="button" class="startGameBtn" disabled="disabled" data-theme="b">{% trans "Start again" %}</button>
			{% endif %}
			<button data-role="button" class="quitRoomBtn" data-theme="b">{% trans "Quit Room" %}</button>
		</div>
	</div>

	<div data-role="dialog" id="goodGuyWinPage">
		<div data-role="header">
			<h3>{% trans "Good Guys Win" %}</h3>
		</div>
		<div data-role="content">
			<p class="game-result"></p>
			{% if request.player.position == 1 %}
			<button data-role="button" class="startGameBtn" disabled="disabled" data-theme="b">{% trans "Start again" %}</button>
			{% endif %}
			<button data-role="button" class="quitRoomBtn" data-theme="b">{% trans "Quit Room" %}</button>
		</div>
	</div>

	<div data-role="page" id="pickGoldPage">
		<div data-role="header">
			<a href="#" data-role="button" data-icon="delete" data-iconpos="left" class="quitRoomBtn">{% trans "Quit Room" %}</a>
			<h3>{% trans "Pick Gold" %}</h3>
		</div>
		<div data-role="content">
			<ul id="goldsArea" class="unstyled"></ul>
		</div>
	</div>

	<div id="disableTouchDiv"></div>

	{# <div data-role="page" id="toolsImageDialog"> #}
		{# <div data-role="header"></div> #}
		{# <div data-role="content"> #}
			{# <div style="width:100%;"> #}
				{# <img src="" alt=""> #}
			{# </div> #}
		{# </div> #}
	{# </div> #}

	{% include 'games/elements/player_div_template.html' %}
	{% include 'games/elements/room_summary_template.html' %}

	<script type="text/javascript" src="{{ STATIC_URL }}jquery/ui/js/jquery-1.9.1.min.js"></script>
	<script type="text/javascript" src="{{ STATIC_URL }}jquery/mobile/jquery.mobile-1.3.1.min.js"></script>
	<script type="text/javascript" src="{{ STATIC_URL }}jquery/ui/js/jquery-ui-1.10.3.custom.min.js"></script>
	<script type="text/javascript" src="{{ STATIC_URL }}jquery/jquery.ui.touch-punch.min.js"></script>
	<script type="text/javascript" src="{{ STATIC_URL }}underscore/underscore.min.js"></script>
	<script type="text/javascript" src="{{ STATIC_URL }}global/js/base.js"></script>
	<script type="text/javascript" src="{{ STATIC_URL }}games/js/render.js"></script>
	<script type="text/javascript">
		function changePage(url) {
			$.mobile.changePage(url, {changeHash: false});
		}
		$(window).on('beforeunload unload', function(){
			return "{% trans 'Are you sure to reload / close the game?' %}";
		});
	</script>
	{% include 'games/elements/js/periodic.html' %}
	<script type="text/javascript" src="{{ STATIC_URL }}games/js/ui.js"></script>
</body></html>