<!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 }
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 }
</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 %}
<section>
{{ input.description }}
</section>
{% endblock %}
</main>
</body>
</html>