1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html>
<html>
<head>
<title>{{form.method}} {{form.action}}</title>
<style>
body { background: black; color: #eee; font: medium sans-serif; }
h1 { text-align: center }
aside { width: 20%; border-right: thin solid #eee; }
dt { font-weight: bold; border-top: thin dashed #999; }
dt a { color: inherit }
.checked { color: lightgreen }
.readonly { font-style: italic }
.disabled { text-decoration: line-through }
.selected { border-right: thick solid green }
input, select, textarea { display: none; }
main { display: flex; flex-direction: row; }
section { padding: 20px }
nav { column-count: 4 } /* FIXME: Screen width issues? */
nav dl { margin: 0 }
dt, dd { break-inside: avoid }
</style>
</head>
<body>
<h1><strong>{{form.method}}</strong> <em>{{form.action}}</em></h1>
<main>
{% set selected=input.index %}
<aside><dl>{% for input in inputs %}
<dt class="{% if input.checked %}checked{% endif %} {% if input.index == selected %}selected{% endif %}">
{% if input.checked %}✓{% endif %}
{% if input.disabled %}{{ input.label }}
{% else %}<a href="/{{input.index}}/{{Q}}" title="{{input.title}}">{{ input.label }}</a>
{% endif %}</dt>
<dd class="{% if input.readonly %}readonly{% endif %}">{{ input.value }}</dd>
{% endfor %}</dl></aside>
{% block main %}
{% if input.list %}<aside><dl>{% for grp in input.list %}
<dt>{{ grp.label }}</dt>
{% for opt in grp.opts %}
{% if opt.disabled %}<dd>{{ opt.label }}</dd>
{% else %}<dd>
<a href="={{ opt.value|xURI }}" title="{{ opt.value }}">
{{ opt.label }}</a>
</dd>{% endif %}
{% endfor %}
{% endfor %}</dl></aside>{% endif %}
{% block control %}<section>
{{ input.description }}
</section>{% endblock %}
{% endblock %}
</main>
</body>
</html>