{% extends "base.html" %}

{% block page %}

	<!-- ********************* -->
	<div id="intro" class="screen" style="display:block;">
		<h1>xdex / exdex / x:dex</h1>
		<div><em>we are using media-specific tools to observe contributions and then place the handles into an exdex</em></div>
		<input class="button" type="button" onclick="nextScreen('intro','choose')" value="add entry"><br>
		
		<!-- xdex xdex xdex xdex xdex -->
		<div id="xdex">
			<table>
				<thead>
					<th>code</th>
					<th>fixed 1</th>
					<th>fixed 2</th>
					<th>loose element</th>
					<th>score</th>
					<th>comment</th>
					<th>status</th>
					<th>update</th>
				</thead>
				<tbody>
					{% for x in xs %}
					<form>
						<tr>
							<td><input class="code" type="text" name="code" value="{{ xdex[x]['code'] }}"></td>
							<td>{{ xdex[x]['fixed1'] }}</td>
							<td>{{ xdex[x]['fixed2'] }}</td>
							<td>{{ xdex[x]['loose'] }}</td>
							<td><textarea name="score" cols="250" rows="10">{{ xdex[x]['score'] }}</textarea></td>
							<td><textarea name="comment" cols="50" rows="10">{{ xdex[x]['comment'] }}</textarea></td>
							<td>
								<select name="status">
									<option {% if xdex[x]['status'] == '-'%}selected{% else %}{% endif %}>-</option>
									<option {% if xdex[x]['status'] == 'ready'%}selected{% else %}{% endif %}>ready</option>
									<option {% if xdex[x]['status'] == 'unsure'%}selected{% else %}{% endif %}>unsure</option>
									<option {% if xdex[x]['status'] == 'delete'%}selected{% else %}{% endif %}>delete</option>
								</select>
							</td>
							<td>
								update x: <br><br>
								<input type="submit" name="submit" value="{{ x }}"></td>
						</tr>
					</form>
					{% endfor %}
				</tbody>
			</table>
		</div>
		<!-- xdex xdex xdex xdex xdex -->
	
	</div>
	<!-- ///////////////////////////// -->
	<!-- start of form to add an entry -->
	<!-- ///////////////////////////// -->
	<form>
		<input id="x" type="hidden" name="x" value="">
		<script>
			var now = new Date().getTime();
			document.getElementById("x").value = now;
		</script>
		<!-- ********************* -->
		<div id="choose" class="screen" style="display:none;">
			<h1>choose</h1>
			<div>choose your fixed pair of elements (handle/tool/contribution)</div>
			<table>
				<thead>
					<th>fixed 1</th>
					<th>fixed 2</th>
				</thead>
				<tbody>
					<tr>
						<td>
							<select name="fixed1">
								<option selected="selected">-</option>
								<option>[handle] - time</option>
								<option>[handle] - we</option>
								<option>[handle] - how</option>
								<option>[handle] - transition</option>
								<option>[tool] - curve</option>
								<option>[tool] - color</option>
								<option>[tool] - text</option>
								<option>[tool] - absence</option>
								<option>[contribution] - feminist infrastructures</option>
								<option>[contribution] - holding spell</option>
								<option>[contribution] - rica rickson</option>
								<option>[contribution] - scores</option>
								<option>[contribution] - bozar group</option>
								<option>[contribution] - collective conditions</option>
								<option>[contribution] - introduction</option>
							</select>
						</td>
						<td>
							<select name="fixed2">
								<option selected="selected">-</option>
								<option>[handle] - time</option>
								<option>[handle] - we</option>
								<option>[handle] - how</option>
								<option>[handle] - transition</option>
								<option>[tool] - curve</option>
								<option>[tool] - color</option>
								<option>[tool] - text</option>
								<option>[tool] - absence</option>
								<option>[contribution] - feminist infrastructures</option>
								<option>[contribution] - holding spell</option>
								<option>[contribution] - rica rickson</option>
								<option>[contribution] - scores</option>
								<option>[contribution] - bozar group</option>
								<option>[contribution] - collective conditions</option>
								<option>[contribution] - introduction</option>
							</select>
						</td>
					</tr>
				</tbody>
			</table>
			<input class="button" type="button" onclick="prevScreen('choose','intro')" value="previous">
			<input class="button" type="button" onclick="nextScreen('choose','identify')" value="next">
		</div>
		<!-- ********************* -->
		<div id="identify" class="screen" style="display:none;">
			<h1>identify</h1>
			<div>identify your loose element (handle/tool/contribution)</div>
			<table>
				<tbody>
					<tr>
						<td>
							<select name="loose">
								<option selected="selected">-</option>
								<option>handle</option>
								<option>tool</option>
								<option>contribution</option>
							</select>
						</td>
					</tr>
				</tbody>
			</table>
			<input class="button" type="button" onclick="prevScreen('identify','choose')" value="previous">
			<input class="button" type="button" onclick="nextScreen('identify','operate')" value="next">
		</div>
		<!-- ********************* -->
		<div id="operate" class="screen" style="display:none;">
			<h1>operate</h1>
			<div>now operate your tools!</div>
			<!-- <div>[either paper&pencil or <a href="https://toolkit.virtualprivateserver.space/">digital</a>]</div> -->
			<div id="tools">
				<div id="curve" class="instruction">
					<h2>curve</h2>
					trace the curves that are significant on this contribution.
				</div>
				<div id="color" class="instruction">
					<h2>color</h2>
					find colors on contributions that are telling, or inject color on contribution.
				</div>			
				<div id="text" class="instruction">
					<h2>text</h2>
					think of anecdotes, questions, tags or glossary entries.
				</div>			
				<div id="absence" class="instruction">
					<h2>absence</h2>
					check what is missing, and note or signal it.
				</div>			
			</div>
			<br>
			<input class="button" type="button" onclick="prevScreen('operate','identify')" value="previous">
			<input class="button" type="button" onclick="nextScreen('operate','describe')" value="next">
		</div>
		<!-- ********************* -->
		<div id="describe" class="screen" style="display:none;">
			<h1>score</h1>
			<div>describe your score (e.g.: highlighted all "we"s in yellow at spideralex's text)</div> 
			<table>			
				<tbody>
					<tr>
						<td><textarea name="score" rows="20"></textarea></td>
					</tr>
				</tbody>
			</table>
			<input class="button" type="button" onclick="prevScreen('describe','operate')" value="previous">
			<input class="button" type="button" onclick="nextScreen('describe','share')" value="next">
		</div>
		<!-- ********************* -->
		<div id="share" class="screen" style="display:none;">
			<h1>comments/details</h1>
			<div>share any extra comments/details, please</div>
			<table>			
				<tbody>
					<tr>
						<td><textarea name="comment" rows="20"></textarea></td>
					</tr>
				</tbody>
			</table>
			<input class="button" type="button" onclick="prevScreen('share','describe')" value="previous">
			<input class="button" type="submit" name="submit" value="add">
		</div>
		<!-- ********************* -->
	</form>
	<!-- /////////////////////////// -->
	<!-- end of form to add an entry -->
	<!-- /////////////////////////// -->
{% endblock %}

{% block footer %}
<script type="text/javascript">
	function nextScreen(current, next) {
    	document.getElementById(current).style.display = 'none';
    	document.getElementById(next).style.display = 'block';
    }
	function prevScreen(current, previous) {
    	document.getElementById(current).style.display = 'none';
    	document.getElementById(previous).style.display = 'block';
    }
</script>
{% endblock %}