<html>
<head>
{% if not ready %}
<meta http-equiv="refresh" content="5">
{% endif %}
<meta name="viewport" content="width=430, height=530, user-scalable=yes,
initial-scale=0.7, maximum-scale=5.0, minimum-scale=0.2" />
<title>
DeBagger - WebUI
</title>
</head>
<body>
{% if device_missing %}
<h2><font color=ff0000>DeBagger Hardware not found!</font>  </h2>
{% else %}
<form action="." method="post">{% csrf_token %}
<table>
<tr>
<td>{% if disposing %}<img src=disposing.png>{% else %}<img src=disposing_off.png>{% endif %}</td>
<td><img src=arrow_right.png></td>
<td>{% if ready %}<img src=ready.png>{% else %}<img src=ready_off.png>{% endif %}</td>
</tr>
<tr>
<td><img src=arrow_up.png></td>
<td>
{% if steeping %}
<h1><center>
{{ remaining_min }}:{{ remaining_sec }}
</h1></center>
{% endif %}
</td>
<td><img src=arrow_down.png></td>
</tr>
<tr>
<td>{% if dipping %}<img src=dipping.png>{% else %}<img src=dipping_off.png>{% endif %}</td>
<td><img src=arrow_left.png></td>
<td>{% if steeping  %}<img src=steeping.png>{% else %}<img src=steeping_off.png>{% endif %}</td>
</tr>
</table>
<hr>

<table cellspacing = 10>
<tr>
<td><b>Time</b></td><td><b>Dips</b></td><td><b>Sugar</b></td>
</tr>
<tr>
<td>
{% if ready %}
<select name="min">
{% autoescape off %}
{{min_select}}
{% endautoescape %}
</select>:
<select name="sec">
{% autoescape off %}
{{sec_select}}
{% endautoescape %}
</select>
{% else %}
{{ remaining_min }}:{{ remaining_sec }}
{% endif %}
</td><td>
{% if ready %}
<select name="dips">
{% autoescape off %}
{{dips_select}}
{% endautoescape %}
</select>
{% else %}
{{num_of_dips }}
{% endif %}
</td><td>
{% if ready %}
<select name="sugar">
{% autoescape off %}
{{sugar_select}}
{% endautoescape %}
</select>
{% else %}
{{ num_of_sugar }}
{% endif %}
</td>
</tr>
</table>
{% if ready %}
<input type="submit" value="Start" />
<input type='hidden' name='action' value='start' />
{% else %}
<input type="submit" value="Stop" />
<input type='hidden' name='action' value='stop' />
{% endif %}
</form>
{% endif %}
</body>
</html>