<!DOCTYPE html>
<html>
<head>
<title>{{form.method}} {{form.action}}</title>
<meta charset=utf-8 />
<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 }
:link { color: white }
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 }
table td:not([colspan]) { width: 25% }
table td { text-align: center }
.error { color: red; }
</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.type == 'password' && input.value != '' %}✓{% endif %}
{% if input.disabled %}{{ input.label }}
{% else %}<a href="/{{input.index}}/{{Q}}" title="{{input.title}}">{{ input.label }}</a>
{% endif %}</dt>
{% if input.error %}<dd class="error">⚠️ {{ input.error }}</dd>{% endif %}
{% if input.type != 'password' %}
<dd class="{% if input.readonly %}readonly{% endif %}"
{% if input.inputType == "color" %}style="background-color: {{ input.value }}"{% endif %}>
{{ input.value }}
</dd>
{% endif %}
{% 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 }}{{Q}}" title="{{ opt.value }}">
{{ opt.label }}</a>
</dd>{% endif %}
{% endfor %}
{% endfor %}</dl></aside>{% endif %}
{% block control %}<section>
{{ input.description }}
</section>{% endblock %}
{% endblock %}
</main>
</body>
</html>