{% extends "base.html" %}
{% block title %}{{ quest_title }}{% endblock %}
{% block head %}
	<script type="text/javascript" src="/static/socket.io.slim.js"></script>
	<script>var room_id = {{ room_id }}; var page_num = {{ page_num }};</script>
	{% if session.get("user_id") == owner_id %}
	<script type="text/javascript" src="/static/anonkunQM.js"></script>
	{% else %}
	<script type="text/javascript" src="/static/anonkunUser.js"></script>
	{% endif %}
{% endblock %}
{% block header %}
{% if session.get("user_id") == owner_id %}
	<li><a href="{{ url_for('.edit_quest', quest_id=quest_id) }}">Edit Quest</a></li>
	<li>
		<select onChange="window.location.href=this.value">
			{% for page in pages %}
			<option value="{{ url_for('.quest', quest_id=quest_id, page_num=page[1]) }}"{% if page[1] == page_num %} selected="yes"{% endif %}>{{ page[2] }}</option>
			{% endfor %}
		</select>
	</li>
{% endif %}
{% endblock %}
{% block content %}
	<div id="questContainer">
		<div id="questPane">
			<center><h1>{{ quest_title }}</h1></center>
			<div id="questPosts">
				{% for quest_post in quest_posts %}
				{% if quest_post[3] == "text" %}
				<div class="questPost textPost">
				{% elif quest_post[3] == "dice" %} 
				<div class="questPost dicePost{% if quest_post == quest_posts|last %} active_post{% endif %}">
				{% elif quest_post[3] == "poll" %} 
				<div class="questPost pollPost{% if quest_post == quest_posts|last %} active_post{% endif %}">
				{% endif %}
					<div class="questPostMeta">
						{{ quest_post[5] | strftime }}
						{% if session.get("user_id") == owner_id %}
						{% if quest_post[3] == "text" %}
						<br /><a href="javascript:void(0);" id="editPost-{{ quest_post[0] }}" onclick="edit_post({{ quest_post[0] }})">Edit</a> 
						<a href="javascript:void(0);" id="savePost-{{ quest_post[0] }}" onclick="save_post('{{ quest_post[0] }}')" style="display:none;">Save</a>
						{% elif quest_post[3] == "dice" or quest_post[3] == "poll" and quest_post == quest_posts|last %}
						{% if quest_post[0] == open_post_id %}
						<br /><a href="javascript:void(0);" id="close_post_id-{{ quest_post[0] }}" onclick="close_post({{ quest_post[0] }})">Close</a>
						<a href="javascript:void(0);" id="open_post_id-{{ quest_post[0] }}" onclick="open_post({{ quest_post[0] }})" style="display:none;">Open</a>
						{% else %}
						<br /><a href="javascript:void(0);" id="close_post_id-{{ quest_post[0] }}" onclick="close_post({{ quest_post[0] }})" style="display:none;">Close</a>
						<a href="javascript:void(0);" id="open_post_id-{{ quest_post[0] }}" onclick="open_post({{ quest_post[0] }})">Open</a>
						{% endif %}
						{% endif %}
						{% endif %}
					</div>
					<div class="questPostData" id="questPostData-{{ quest_post[0] }}">
						{% if quest_post[3] == "text" %}
						{% autoescape false %}
						{{ quest_post[4] }}
						{% endautoescape %}
						{% elif quest_post[3] == "dice" %}
						<h3>{{ quest_post[4] }} - {% if quest_post[0] == open_post_id %}Open{% else %}Closed{% endif %}</h3>
						{% for dice_roll in dice_rolls[quest_post[0]] %}
						<div id="questRollId-{{ dice_roll[0] }}">
							<b>Rolled {{ dice_roll[4] }} = {{ dice_roll[5] }} ({{ dice_roll[3] }}){% if quest_post[0]|dice_chal != 0 %} - {% if dice_roll[5] >= quest_post[0]|dice_chal %}Pass{% else %} Fail{% endif %}{% endif %}</b>
						</div>
						{% endfor %}
						{% elif quest_post[3] == "poll" %}
						<h3>{{ quest_post[4] }} - {% if quest_post[0] == open_post_id %}Open{% else %}Closed{% endif %}</h3>
						<table class="poll" id="poll-{{ quest_post[0] }}">
							<col{% if quest_post[0] != open_post_id %} style="visibility: collapse;"{% endif %}/>
							<col/>
							<col/>
							{% for option in options[quest_post[0]] %}
							<tr id="optionRow-{{ option[0] }}">
								<td class="pollCheckBox">
									<input type="checkbox" {% if ip_address in poll_votes[option[0]] %}checked="true"{% endif %} id="pollInput-{{ option[0] }}" onchange="pollVote({{ quest_post[0] }}, {{ option[0] }})"/>
									<label for="pollInput-{{ option[0] }}"></label>
								</td>
								<td class="option_text">{{ option[2] }}</td>
								<td class="optionVotes">{{ poll_votes[option[0]]|length }}</td>
							</tr>
							{% endfor %}
						</table>
						{% if quest_post[0] == open_post_id and quest_post[0]|is_write_in %}
						<div id="writeinContainer">
							Write-in: <input type="text" id="writeinInput" placeholder="Custom choice..." maxlength="200" /><br />
							<input type="submit" id="writeinSubmit" value="Submit" onclick="submitWritein({{ quest_post[0] }});"/>
						</div>
						{% endif %}
						{% endif %}
					</div>
				</div><br />
				{% endfor %}
			</div>
			{% if session.get("user_id") == owner_id %}
			<div id="QMPostPane">
				<div>
					<ul id="QMPostTabs">
						<li><a class="QMPostTab active" href="javascript:void(0);" onclick="openPostTab(event, 'QMPostText')">Text</a></li>
						<li><a class="QMPostTab" href="javascript:void(0);" onclick="openPostTab(event, 'QMPostDice')">Dice</a></li>
						<li><a class="QMPostTab" href="javascript:void(0);" onclick="openPostTab(event, 'QMPostPoll')">Poll</a></li>
					</ul>
				</div>
				<div id="QMPostText" class="QMPostTabContent" style="display:initial;">
					<textarea id="postTextArea"></textarea><br />
					<input type="submit" name="newPost" value="Post" onclick="makePost();"/>
				</div>
				<div id="QMPostDice" class="QMPostTabContent" style="display:none;">
					Dice for the dice god.<br />
					<form id="QMDicePostForm" action="javascript:void(0);" onsubmit="form_post('QMDicePostForm', 'dice_post');">
						Dice: <input type="number" name="diceNum" min="1" max="99" required/>
						d <input type="number" name="diceSides" min="1" max="99" required/>
						±<input type="number" name="diceMod" min="-999" max="999"/>
						<input type="checkbox" name="diceStrict"/>
						<span class="tooltip" title="Only take matching rolls.">Strict</span><br />
						<input type="checkbox" onclick="document.getElementById('diceChal').disabled=!this.checked;"/>
						<span class="tooltip" title="Dice challenge">DC:</span>
						<input type="number" name="diceChal" id="diceChal" min="1" max="99" disabled/><br />
						<input type="checkbox" onclick="document.getElementById('diceRollsTaken').disabled=!this.checked;"/>
						<span class="tooltip" title="Automatically close the dice call after this many rolls have been made.">Rolls Taken:</span>
						<input type="number" name="diceRollsTaken" id="diceRollsTaken" min="1" max="99" disabled/><br />
						<input type="submit" name="submit" value="Roll 'em"/>
					</form>
				</div>
				<div id="QMPostPoll" class="QMPostTabContent" style="display:none;">
					The polls are rigged.
					<form id="QMPollPostForm" action="javascript:void(0);" onsubmit="form_post('QMPollPostForm', 'poll_post');">
						<a href="javascript:void(0);" id="pollInsertNewOption" onclick="insertPollOption()">[+]</a>
						<a href="javascript:void(0);" onclick="removePollOption()">[-]</a>
						<div id="pollOptions">
							<div><input type="text" name="pollOption-1" class="pollOption" placeholder="Option 1" maxlength="200" /></div>
							<div><input type="text" name="pollOption-2" class="pollOption" placeholder="Option 2" maxlength="200" /></div>
						</div>
						<hr>
						<input type="checkbox" name="pollAllowMultipleChoices" />Allow multiple choices<br />
						<input type="checkbox" name="pollAllowUserOptions" />Allow user-created options<br />
						<input type="submit" name="submit" value="Submit" />
					</form>
				</div>
			</div>
			{% endif %}
		</div>
		<br />
		<br />
		<div id="chatPane">
			<h1>Chat</h1>
			<div id="chatWindow">
				{% autoescape false %}
				{% for message in messages %}
				<div id="msg-{{ message[0] }}" class="message">
					<div class="messageHeader">
						<span class="messageName">Anonymous</span>
						<span class="messageDate">{{ message[3] | strftime }}</span>
						<span class="messageID">No.<a href="javascript:quote('{{ message[0] }}')">{{ message[0] }}</a></span>
					</div>
					<div class="messageContent">{{ message[4] }}</div>
				</div>
				<hr>
				{% endfor %}
				{% endautoescape %}
			</div>
			<div id="messageTextDiv"><textarea id="messageTextArea"></textarea></div>
		</div>
	</div>
	<div id="preview" style="display:none;"></div>
{% endblock %}