{% extends "base.html" %}
{% block head %}<link rel="stylesheet" href="/css/pages/settings.css?v={{ local_version }}">{% endblock %}
{% block content %}
{% macro setting_row(s) %}
  <div class="setting-row {{ 'is-forced' if s.forced }}">
    <div class="setting-text">
      <label class="setting-label" for="{{ s.key }}">{{ s.label }}</label>
      {% if s.help %}<p class="setting-help">{{ s.help }}</p>{% endif %}
      {% if s.forced %}<p class="setting-forced">Set by {{ s.env_name }}, not editable here.</p>{% endif %}
    </div>
    <div class="setting-main">
      {% if s.is_bool %}
      <label class="switch">
        <input type="checkbox" id="{{ s.key }}" name="{{ s.key }}"
               {% if s.value %}checked{% endif %} {% if s.forced %}disabled{% endif %}>
        <span class="switch-track"><span class="switch-thumb"></span></span>
      </label>

      {% elif s.supports_inf %}
      <div class="setting-control-inf">
        <div class="setting-control">
          <input type="range" class="setting-slider" min="{{ s.minimum }}" max="{{ s.slider_max }}"
                 step="any" value="{{ 0 if s.is_inf else s.value }}"
                 {% if s.forced or s.is_inf %}disabled{% endif %}
                 oninput="document.getElementById('{{ s.key }}').value = this.value">
          <input type="text" id="{{ s.key }}" name="{{ s.key }}" class="setting-number"
                 value="{{ 'inf' if s.is_inf else s.value }}"
                 {% if s.forced or s.is_inf %}readonly{% endif %}
                 oninput="var v = parseFloat(this.value); if (!isNaN(v)) this.previousElementSibling.value = v;">
        </div>
        <label class="setting-inf-toggle">
          <input type="checkbox" {% if s.is_inf %}checked{% endif %} {% if s.forced %}disabled{% endif %}
                 onchange="var row = this.closest('.setting-control-inf');
                           var num = row.querySelector('.setting-number');
                           var range = row.querySelector('.setting-slider');
                           if (this.checked) { num.dataset.prev = num.value; num.value = 'inf'; num.readOnly = true; range.disabled = true; }
                           else { num.value = num.dataset.prev || '0'; num.readOnly = false; range.disabled = false; }">
          review every request myself
        </label>
      </div>

      {% elif s.slider_max is not none %}
      <div class="setting-control">
        <input type="range" class="setting-slider" min="{{ s.minimum }}" max="{{ s.slider_max }}"
               step="{{ 1 if s.value is number and s.value == s.value|int else 'any' }}"
               value="{{ s.value }}" {% if s.forced %}disabled{% endif %}
               oninput="document.getElementById('{{ s.key }}').value = this.value">
        <input type="text" id="{{ s.key }}" name="{{ s.key }}" class="setting-number"
               value="{{ s.value }}" {% if s.forced %}disabled{% endif %}
               oninput="var v = parseFloat(this.value); if (!isNaN(v)) this.previousElementSibling.value = v;">
      </div>

      {% else %}
      <input type="text" id="{{ s.key }}" name="{{ s.key }}" class="setting-number"
             value="{{ s.value }}" {% if s.forced %}disabled{% endif %}>
      {% endif %}
    </div>
  </div>
{% endmacro %}
{% set groups = [
  ("Building and display", "Whether this node builds blocks, when it holds back, and what the odds page shows.", ["mining_enabled", "draw_window_seconds", "min_odds_pct", "show_hardware_details"]),
  ("Privacy and publishing", "What this node shows publicly and writes into the chain.", ["hide_address_publicly", "publish_machine"]),
] %}
{% set grouped = groups|map(attribute=2)|sum(start=[]) %}

<div class="page-head"><h2>Settings</h2></div>

{% if alert_ok %}<div class="alert alert-ok">{{ alert_ok }}</div>{% endif %}
{% if alert_err %}<div class="alert alert-err">{{ alert_err }}</div>{% endif %}

<form method="POST" class="settings-form">
<input type="hidden" name="csrf_token" value="{{ csrf_token }}">

<div class="settings-cols">
{% for title, blurb, keys in groups %}
  <section class="settings-group">
    <h3 class="group-title">{{ title }}</h3>
    <p class="group-blurb">{{ blurb }}</p>
    {% for s in settings if s.key in keys %}{{ setting_row(s) }}{% endfor %}
  </section>
{% endfor %}
{% set rest = settings|rejectattr("key", "in", grouped)|list %}
{% if rest %}
  <section class="settings-group">
    <h3 class="group-title">Other</h3>
    {% for s in rest %}{{ setting_row(s) }}{% endfor %}
  </section>
{% endif %}
</div>

<div class="save-bar">
  <span class="save-note">Changes apply on the next read, no restart needed.</span>
  <button type="submit">Save</button>
</div>
</form>
{% endblock %}