{% extends "base.html" %}

{% block page %}
<div class="info">
	<p><strong class="handle">*4</strong>: transitional moments of handing over, generative troublematics (collective response-ability)</p>
	<p><strong class="annotation">visual traces</strong>: Which visual traces can we “cut out” that engage with <strong class="handle">*4</strong>? <!-- What questions can we formulate and attach as annotations to image documentation of the hand-over-moments? --></p>
</div>
<hr>
<form method="POST" enctype=multipart/form-data>
	<input type="file" name="trace" accept=".png, .gif|image/*"><br>
	<input type="submit" value="upload"/>
	<a id="reset" href="/visual-traces/"><input class="reset" type="button" value="reset"></a>
	<br>
	<small>
		<strong>Works with file formats</strong>: png, gif<br>
		<strong>Note</strong>: please submit traces with transparent backgrounds!
	</small>
<hr>
<div id="traces">
	<h2><strong class="annotation">visual-traces</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>
					<img class="traces" src="{{ url_for('static', filename='visual-traces/')}}{{ db[x]['trace'] }}">
				</td>
				<td>
					<textarea cols="100" rows="15" 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 %}