---
layout: single
---

{%- for group in page.data %}
<h2 id="{{ group.title }}">{{ group.title }}</h2>
{% for pair in group.settings %}
{% assign name = pair[0] %}
{% assign value = pair[1] %}
{% assign setting = site.data.settings[name] %}
<div class="notice">
  <h3 id="{{ name }}">{{ value.title }}</h3>
  {% if value.description %}<p>{{ value.description }}</p>{% endif %}
  {% if setting.type == 'radio' %}
  {% for option in setting.options %}
  <label>
    <input type="radio"{% if setting.default == option %} checked{% endif %} class="setting-item" name="{{ name }}" value="{{ option }}">
    {{ value.options[option] }}
  </label>
  {% endfor %}
  {% elsif setting.type == 'multi-radio' %}
  <table class="setting-multi-radio">
    <thead>
      <tr>
        <th>{{ value.title }}</th>
        {% for item in setting.children %}
        {% capture item_name %}{{ item[0] }}{% endcapture %}
        <th>{{ value.children[item_name] }}</th>
        {% endfor %}
      </tr>
    </thead>
    <tbody>
      {% for option in setting.options %}
      <tr>
        <th>{{ value.options[option] }}</th>
        {% for item in setting.children %}
        <td><input class="setting-item"{% if item[1].default == option %} checked{% endif %} type="radio" name="{{ name }}.{{ item[0] }}" value="{{ option }}"></td>
        {% endfor %}
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% endif %}
</div>
{% endfor %}
{% endfor %}

<script>
  for (const settingItem of document.getElementsByClassName("setting-item")) {
    settingItem.addEventListener("change", ({ target }) => settings.set(target.name, target.value));
    settings.onChange(settingItem.name, (value) => settingItem.type === "radio" && (settingItem.checked = settingItem.value === value));
  }
</script>

<style>.notice label input { display: inline }</style>