{% extends "base.html" %}
{% block head %}
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/curves.css')}}">
{% endblock %}

{% block page %}
<div class="info">
	<p><strong class="handle">*1</strong>: systematics, temporalities (group formations)</p>
	<p><strong class="annotation">curves</strong>: What curves are used to engage with <strong class="handle">*1</strong>?</p>
</div>
<hr>
<form action="" method="GET">
	<!-- https://spline.technology/demo/# -->
	<div class="modal" id="help-modal">
		<div class="modal-content">
			<span class="close" id="help-close">&times;</span>
			<p><b>A new spline</b></p>
			<p>Add a new corner point: click. Add a new smooth point, Alt + click, or click and drag.</p>
			<p>Select multiple points: Shift + click.</p>
			<p>Refine a curve: click on the curve and drag.</p>
			<p>Set an explicit tangent: click and drag on the handles. Set axis-aligned: Shift + click. Unset an explicit tangent: drag away.</p>
			<p>Toggle between smooth and corner points: double-click.</p>
			<p>Delete a point: delete (or backspace) key.
			<p>Nudge points by 1 px: arrow keys. Nudge by 10 px: Shift + arrow keys.
			<p>Copyright 2018 Raph Levien</p>
			<p>Github repo: <a href="https://github.com/raphlinus/spline-research">raphlinus/spline-research</a></p>
		</div>
	</div>
	<div class="modal" id="save-json-modal">
		<div class="modal-content">
			<span class="close" id="save-json-close">&times;</span>
			<pre id="save-json-content"></pre>
		</div>
	</div>
	<div class="modal" id="load-json-modal">
		<div class="modal-content">
			<span class="close" id="load-json-close">&times;</span>
			<p><b>Load from JSON</b></p>
			<textarea id="load-text" placeholder="Paste JSON data here..." rows=20></textarea>
			<p><button id="load-button" type="button">Load</button></p>
		</div>
	</div>
	<svg id="s" class="canvas" width="640" height="480" pointer-events="all">
		<path id="ctrlpoly" d="" stroke="none" fill="none" />
		<path id="spline" d="" stroke="black" fill="none" stroke-width="2" />
		<path id="spline2" d="" stroke="blue" fill="none" stroke-width="2" />
		<g id="handles" />
		<g id="plots" />
	</svg>
	<!--  -->
	<input class="ready" type="button" value="ready" onclick="ready()" /><br>
	<textarea id="curve" name="curve" cols="89" rows="10" required></textarea><br>
	<input class="submit" type="submit" value="submit"/>
	<a id="reset" href="/curves/"><input class="reset" type="button" value="reset"></a>
	<hr>
	<div id="curves">
		<h2><strong class="annotation">curves</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>
						{{ db[x]['curve'] | safe }} 
					</td>
					<td>
						<textarea cols="100" rows="25" 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>
	</div>
</form>
{% endblock %}
{% block footer %}
<script type="text/javascript">
	function ready(){
		var svg = document.getElementById("s").outerHTML;
		// console.log(svg);
		var curve = document.getElementById("curve").innerHTML = svg;
	}

</script>
<script type="text/javascript" src="{{ url_for('static', filename='js/bezpath.js')}}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/curves.js')}}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/splineui.js')}}"></script>
{% endblock %}