{% 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;
}

input[type="radio"] {
    position: absolute; /* Positions the radio button relative to the edges of its containing element */
    -webkit-appearance: none; /* Removes its native styling */
    width: min-content;
    margin: 0;
    border: none;
    cursor: pointer;
}

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;
}

.radio-button {
    position: relative; /* The absolutely positioned element inside this tag (the radio button) gets positioned relative to it. */
    display: inline-flex;
    margin: 3px 1px;
}

.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;
}

.option-description p {
    margin: 0;
}

.long-description {
    white-space: pre-line;
}

details summary > * {
    display: inline;
}

details[open] .details {
    display: none;
}

summary {
    margin: .5ex 0;
    width: fit-content;
    color: #1887c5;
    outline: none;
    font-size: 105%;
    cursor: pointer;
}

summary .short-description {
    color: #635d5dcf;
}

summary::selection {
    background-color: inherit;
}
{% 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>
      {% set loopIndex = loop.index0 %}
      <!-- FIXME: convert to string properly -->
      <td class="setting">{{ option.name }}
        {% if option.description %}
          {% set description = option.description.split('\n', 1) %}
          <div class="option-description">
            {% if description|length > 1 %}
              <details>
                <summary>
                  <p class="short-description">{{ description[0]|e }}</p>
                  <span class="details">Details</span>
                </summary>
                <p class="long-description">{{ description[1]|e }}</p>
              </details>
            {% else %}
              <p>{{ description[0]|e }}</p>
            {% endif %}
          </div>
        {% endif %}
      </td>
      {% set valid_values = option.typ.valid_values %}
      {% if valid_values is not none and not valid_values.others_permitted %}
        <td class="valid-value">
          {% for value in 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 %}
