{% extends "base.html" %}

{% block page %}
<div class="info">
	<p><strong class="handle">*2</strong>: “we”, temporary structures that condition work (who? where? how? why?)</p>
	<p><strong class="annotation">color</strong>: What colors are used to engage with <strong class="handle">*2</strong>?</p>
</div>
<hr>
<form action="" method="GET">
	<div id="inputfields">
	Select a color: <input type="color" name="color"/><br>
	</div>
	<br>
	<input class="submit" type="submit" value="submit"/>
	<input type="reset">
<hr>
<div id="colors">
	<h2><strong class="annotation">colors</strong> gathered so far include:</h2>
	<br>
	<table>
		<thead>
			<th>marker</th>
			<th>description</th>
			<th>status</th>
		</thead>
		<tbody>
		{% for x in db.keys() %}
			<tr>
				<td>
					<div id="color-preview" style="background-color: {{ db[x]['color'] }}"></div>
				</td>
				<td>
					<textarea cols="100" rows="8" name="description-{{x}}"></textarea>
				</td>
				<td>
					<select name="status-{{x}}">
						<option value="include" selected="selected">include</option>
						<option value="unsure">unsure</option>
						<option value="delete">delete</option>
					</select>
				</td>
		{% endfor %}
		</tbody>
	</table>
</form>
</div>
{% endblock %}