{% extends "base.html" %}
{% block title %}{{ quest.title }}{% endblock %}
{% block head %}
	<link rel="stylesheet" type="text/css" href="{{ static('quest.css') }}">
	{% if request.user == quest.owner %}
	<link rel="stylesheet" type="text/css" href="{{ static('questQM.css') }}">
	{% endif %}
	<script>
		const quest_id = {{ quest.id }};
		const page_num = {{ page_num }};
		const SCRIPT_NAME = '{{ request.META["SCRIPT_NAME"] }}';
		const anon_name = '{{ quest.anon_name }}';
	</script>
	<script type="text/javascript" src="{{ static('quest.js') }}"></script>
	{% if request.user == quest.owner %}
	<script type="text/javascript" src="{{ static('questQM.js') }}"></script>
	{% endif %}
	<script>window.onload = load;</script>
{% endblock %}
{% block header %}
{% if request.user == quest.owner %}
	<li><a href="{{ url('quest:edit_quest', args=[quest_id]) }}">Edit Quest</a></li>
{% endif %}
	<li>
		<select onChange="window.location.href=this.value">
			{% for page in pages %}
			<option value="{{ url('quest:quest', args=[quest_id, page.page_num]) }}"{% if page.page_num == page_num %} selected="yes"{% endif %}>{{ page.title }}</option>
			{% endfor %}
		</select>
	</li>
	<li id="toggleChat"><a onclick="toggle_chat()" href="javascript:void(0);">{% if request.session.get("hide_chat") == True %}←{% else %}→{% endif %}</a></li>
{% endblock %}
{% block content %}
	<div id="questPane" style="width:{% if request.session.get("hide_chat") == True %}100%{% else %}70%{% endif %};">
		<center><h1>{{ quest.title }}</h1></center>
		<div id="questPosts">
			{% for post in posts %}
			{% if post.post_type == "text" %}
			<div class="questPost textPost">
			{% elif post.post_type == "dice" %} 
			<div class="questPost dicePost{% if post.dicecall.open %} activePost{% endif %}">
			{% elif post.post_type == "poll" %} 
			<div class="questPost pollPost{% if post.poll.open %} activePost{% endif %}">
			{% endif %}
				<div class="questPostMeta">
					{{ localtime(post.timestamp).strftime('%Y-%m-%d %H:%M') }}
					{% if request.user == quest.owner %}
					{% if post.post_type == "text" %}
					<br><a href="javascript:void(0);" id="editPost-{{ post.id }}" onclick="edit_post({{ post.id }})">Edit</a> 
					<a href="javascript:void(0);" id="savePost-{{ post.id }}" onclick="save_post('{{ post.id }}')" style="display:none;">Save</a>
					{% elif post.post_type == "dice" %}
					<br><a href="javascript:void(0);" id="closePost-{{ post.id }}" onclick="close_post_send({{ post.id }})"{% if not post.dicecall.open %} style="display:none;"{% endif %}>Close</a>
					<a href="javascript:void(0);" id="openPost-{{ post.id }}" onclick="open_post_send({{ post.id }})"{% if post.dicecall.open %} style="display:none;"{% endif %}>Open</a>
					{% elif post.post_type == "poll" %}
					<br><a href="javascript:void(0);" id="closePost-{{ post.id }}" onclick="close_post_send({{ post.id }})"{% if not post.poll.open %} style="display:none;"{% endif %}>Close</a>
					<a href="javascript:void(0);" id="openPost-{{ post.id }}" onclick="open_post_send({{ post.id }})"{% if post.poll.open %} style="display:none;"{% endif %}>Open</a>
					{% endif %}
					{% endif %}
				</div>
				<div class="questPostData" id="questPostData-{{ post.id }}">
					{% if post.post_type == "text" %}
					{% autoescape false %}
					{{ post.post_text }}
					{% endautoescape %}
					{% elif post.post_type == "dice" %}
					<h3>{{ post.post_text }} - {% if post.dicecall.open %}Open{% else %}Closed{% endif %}</h3>
					{% for dice_roll in dice_rolls.filter(dicecall=post.dicecall) %}
					<div id="questRollId-{{ dice_roll.id }}">
						<b>Rolled {{ dice_roll.results }} = {{ dice_roll.total }} ({{ dice_roll.roll }}){% if post.dicecall.dice_challenge %} - {% if dice_roll.total >= post.dicecall.dice_challenge %}Pass{% else %}Fail{% endif %}{% endif %}</b>
					</div>
					{% endfor %}
					{% elif post.post_type == "poll" %}
					<h3>{{ post.post_text }} - {% if post.poll.open %}Open{% else %}Closed{% endif %}</h3>
					<table class="poll" id="poll-{{ post.id }}">
						{% for option in poll_options.filter(poll=post.poll).order_by("id") %}
						<tr id="optionRow-{{ option.id }}">
							<td class="pollCheckBox">
								<input type="checkbox" {% if poll_votes.filter(option=option, ip_address=ip_address) %}checked="true"{% endif %} id="pollInput-{{ option.id }}" onchange="vote({{ post.id }}, {{ option.id }})"{% if not post.poll.open %} disabled{% endif %}>
								<label for="pollInput-{{ option.id }}"></label>
							</td>
							<td class="option_text">{{ option.text }}</td>
							<td class="optionVotes">{{ poll_votes.filter(option=option).count() }}</td>
						</tr>
						{% endfor %}
					</table>
					{% if post.poll.open and post.poll.allow_writein %}
					<div id="writeinContainer-{{ post.id }}">
						Write-in: <input type="text" id="writeinInput-{{ post.id }}" placeholder="Custom choice..." maxlength="200"><br>
						<input type="submit" id="writeinSubmit-{{ post.id }}" value="Submit" onclick="submitWritein({{ post.id }});">
					</div>
					{% endif %}
					{% endif %}
				</div>
			</div><br>
			{% endfor %}
		</div>
		{% if request.user == quest.owner %}
		<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>
					<li><a class="QMPostTab" href="javascript:void(0);" onclick="openPostTab(event, 'QMPage')">Page</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="999" 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="multi_choice">Allow multiple choices<br>
					<input type="checkbox" name="allow_writein">Allow user-created options<br>
					<input type="submit" name="submit" value="Submit">
				</form>
			</div>
			<div id="QMPage" class="QMPostTabContent" style="display:none;">
				<form id="QMPageForm" action="javascript:void(0);" onsubmit="form_post('QMPageForm', 'new_page');">
					New Page: <input type="text" name="page_title" maxlength="200" value="Page {{ pages.count() + 1 }}"><br>
					<input type="submit" name="submit" value="Submit">
				</form>
			</div>
		</div>
		{% endif %}
	</div>
	<div id="chatPane" style="display:{% if request.session.get("hide_chat") == True %}none{% else %}flex{% endif %};">
		<h1>Chat</h1>
		<div id="chatWindow">
			{% autoescape false %}
			{% for message in messages %}
			<div id="msg-{{ message.id }}" class="message">
				<div class="messageHeader">
					<span class="messageName">{{ message.user.username or quest.anon_name }}</span>
					<span class="messageDate">{{ localtime(message.timestamp).strftime('%Y-%m-%d %H:%M:%S') }}</span>
					<span class="messageID">No.<a href="javascript:quote('{{ message.id }}')">{{ message.id }}</a></span>
				</div>
				<div class="messageContent">{{ message.message }}</div>
			</div>
			<hr>
			{% endfor %}
			{% endautoescape %}
		</div>
		<div id="messageTextDiv"><textarea id="messageTextArea" maxlength="512"></textarea></div>
	</div>
	<div id="preview" style="display:none;"></div>
{% endblock %}