{% extends "base.html" %}

{% block script %}
var cset = function(option, value) {
  // FIXME:conf we might want some error handling here?
  var url = "qute://settings/set?option=" + encodeURIComponent(option);
  url += "&value=" + encodeURIComponent(value);
  var xhr = new XMLHttpRequest();
  xhr.open("GET", url);
  xhr.send();
}
{% 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; }
input { width: 98%; }
.setting { width: 75%; }
.value { width: 25%; text-align: center; }
.noscript, .noscript-text { color:red; }
.noscript-text { margin-bottom: 5cm; }
.option_description { margin: .5ex 0; color: grey; font-size: 80%; font-style: italic; white-space: pre-line; }
{% endblock %}

{% block content %}
<noscript><h1 class="noscript">View Only</h1><p class="noscript-text">Changing settings requires javascript to be enabled!</p></noscript>
<header><h1>{{ title }}</h1></header>
<table>
    <tr>
        <th>Setting</th>
        <th>Value</th>
    </tr>
  {% for option in configdata.DATA.values() if not option.no_autoconfig %}
    <tr>
      <!-- FIXME: convert to string properly -->
      <td class="setting">{{ option.name }} (Current: {{ confget(option.name) | string |truncate(100) }})
        {% if option.description %}
          <p class="option_description">{{ option.description|e }}</p>
        {% endif %}
      </td>
      <td class="value">
        <input type="text"
          id="input-{{ option.name }}"
          onblur="cset('{{ option.name }}', this.value)"
          value="{{ confget(option.name) }}">
        </input>
      </td>
    </tr>
  {% endfor %}
</table>

{% endblock %}