{% extends "base.html" %}

{% block script %}
var cset = function(option, value) {
  // FIXME:conf we might want some error handling here?
  var url = "qute://user:{{csrf_token}}@settings/set"
  url += "?option=" + encodeURIComponent(option);
  url += "&value=" + encodeURIComponent(value);
  var xhr = new XMLHttpRequest();
  xhr.open("GET", url);
  xhr.send();
}
{% endblock %}

{% block style %}
table {
    border-spacing: 10px;
}

tbody tr:nth-child(odd) {
    background: #eaf4fb;
}

pre {
    margin: 2px;
}

th {
    padding: 10px;
    border-radius: 5px;
    background: #a6dfff;
    text-align: left;
    font-weight: normal;
    font-size: 1.5rem;
    color: #084c88;
}

td {
    padding: 5px 5px;
}

th pre {
    color: grey;
    text-align: left;
}

input {
    padding: 8px;
    width: 98%;
    box-sizing: border-box;
    border-radius: 4px;
    border: 1px solid #01cdd0;
    font-size: 0.9rem;
    font-family: DejaVu, serif;
}

input:focus {
    outline: none;
    border: 2px solid #7a589ea6;
}

/* Hides the radio button */
input[type="radio"] {
    position: absolute;
    opacity: 1%;
    width: min-content;
    margin: 0;
}

label {
    cursor: pointer;
    margin-bottom: 2px;
    padding: 5px 10px;
    border-radius: 5px;
    background-color: #dddddd;
    color: #666666;
}

input[type="radio"]:checked + label {
    background-color: #a6dfff;
    color: #084c88;
}

.setting {
    width: 60%;
}

.value {
    width: 25%;
    text-align: center;
}

.valid-value {
    text-align: center;
}

.noscript, .noscript-text {
    color: red;
}

.noscript-text {
    margin-bottom: 5cm;
}

.option-description {
    margin: .5ex 0;
    color: #635d5dcf;
    font-size: 80%;
    font-style: italic;
    white-space: pre-line;
}

.radio-button {
    position: relative;
    display: inline-flex;
    margin: 3px 1px;
}
{% endblock %}

{% block content %}
<noscript><h1 class="noscript">View Only</h1><p class="noscript-text">Changing settings requires javascript to be enabled!</p></noscript>
<table>
    <tr>
        <th>Setting</th>
        <th>Value</th>
    </tr>
  {% for option in configdata.DATA.values()|sort(attribute='name') if not option.no_autoconfig %}
    <tr>
      <!-- FIXME: convert to string properly -->
      <td class="setting">{{ option.name }}
        {% if option.description %}
          <p class="option-description">{{ option.description|e }}</p>
        {% endif %}
      </td>
      {% if option.typ.valid_values is not none %}
        <td class="valid-value">
          {% for value in option.typ.valid_values.values %}
	    <div class="radio-button">
	      <input type="radio" id="input-{{ option.name }}-{{ loop.index0 }}"
	        name="{{ option.name }}" value="{{ value }}"
	        onclick="cset('{{ option.name }}', this.value)"
	        {% if confget(option.name) == value %}
		  checked
		{% endif %}>
	      <label for="input-{{ option.name }}-{{ loop.index0 }}">
	        {{ value }}
	      </label>
	      </div>
	  {% endfor %}
	</td>
      {% else %}
        <td class="value">
	  <input type="text"
	    id="input-{{ option.name }}"
	    onblur="cset('{{ option.name }}', this.value)"
	    value="{{ confget(option.name) }}">
	  </input>
        </td>
      {% endif %}
    </tr>
  {% endfor %}
</table>

{% endblock %}