{% extends "base.html" %}
{% block title %}kennis - {{ settings_heading }}{% endblock %}
{% block main %}
{% from "tip.html" import tip %}
{# Settings (milestone 12). This window's preferences first, kept apart
   from kennis's configuration and saying so, because changing one of
   these changes nothing the command line or an agent sees.

   One form. With a script each control applies and saves itself as it
   is chosen (`prefs.js`, every input marked `data-pref`) and the Save
   button is hidden; without one, Save posts every choice to
   `/settings`, which sets the cookies and returns here. #}
<article class="settings">
<h1>{{ settings_heading }}</h1>
<section data-section="window">
<h2>{{ window_heading }}</h2>
<p class="role-muted">{{ window_note }} {{ tip("window-settings", window_heading, window_tip) }}</p>
<form class="preferences" action="/settings" method="post">
{% for section, heading in sections %}
<h3>{{ heading }}</h3>
{% for preference in preference_list if preference.section == section %}
{% if preference.name == "scale" %}
{# A radio list, because each option is five colours as well as a name,
   which an `<option>` cannot draw. #}
<fieldset class="setting" data-preference="{{ preference.name }}">
<legend class="setting-name">{{ preference.label }} {{ tip("pref-" ~ preference.name, preference.label, preference.sentence) }}</legend>
<div class="setting-control radio-list">
{% for value, label in preference.choices %}
<label class="choice"><input type="radio" name="{{ preference.name }}" value="{{ value }}" data-pref{% if chosen[preference.name] == value %} checked{% endif %}><span class="swatches" aria-hidden="true">{% for step in range(1, 6) %}<i class="swatch" data-scale="{{ value }}" data-step="{{ step }}"></i>{% endfor %}</span><span>{{ label }}</span></label>
{% endfor %}
</div>
</fieldset>
{% else %}
{# A dropdown, as kennis's own settings are: one value is always in
   force and the options are words to read. #}
<div class="setting" data-preference="{{ preference.name }}">
<div class="setting-head"><label class="setting-name" for="pref-{{ preference.name }}">{{ preference.label }}</label> {{ tip("pref-" ~ preference.name, preference.label, preference.sentence) }}</div>
<div class="setting-control">
<select id="pref-{{ preference.name }}" name="{{ preference.name }}" data-pref>
{% for value, label in preference.choices %}<option value="{{ value }}"{% if chosen[preference.name] == value %} selected{% endif %}>{{ label }}</option>{% endfor %}
</select>
</div>
</div>
{% endif %}
{% endfor %}
{% endfor %}
<button type="submit" class="prefs-save">{{ save_label }}</button>
</form>
</section>
{% include "settings-kennis.html" %}
{% include "settings-backup.html" %}
</article>
{% endblock %}