{% extends "base.html" %}

{% block script %}
var cset = function(section, option, el) {
  value = el.value;
  window.qutesettings.set_javascript(section, option, value);
}
{% endblock %}

{% block style %}
table { border: 1px solid grey; border-collapse: collapse; }
pre { margin: 2px; }
th, td { border: 1px solid grey; padding: 0px 5px; }
th { background: lightgrey; }
th pre { color: grey; text-align: left; }
{% endblock %}

{% block content %}
<header><h1>{{ title }}</h1></header>
<table>
{% for section in config.DATA %}
  <tr><th colspan="2"><h3>{{ section }}</h3><pre>{{ config.SECTION_DESC.get(section)|wordwrap(width=120) }}</pre></th></tr>
  {% for d, e in config.DATA.get(section).items() %}
    <tr>
      <td>{{ d }} (Current: {{ e.value()|truncate(100) }})</td>
      <td>
        <input type="input"
          onblur="cset('{{ section }}', '{{ d }}', this)"
          value="{{ e.value() }}">
        </input>
      </td>
    </tr>
  {% endfor %}
{% endfor %}
</table>

{% endblock %}