{% extends "base.html" %}
{% block title %}{{ title }} settings — {{ library_name() }}{% endblock %}
{% block content %}

<div class="settings-layout">
{% include "_partials/settings_sidebar.html" %}
<div class="settings-main">

<nav aria-label="breadcrumb">
  <ul>
    <li><a href="/ui/catalog">Home</a></li>
    <li><a href="/ui/admin/settings">Settings</a></li>
    <li>{{ title }}</li>
  </ul>
</nav>

<h2>{{ title }}</h2>
<p>{{ intro | safe }}</p>

{% if message %}<p class="success-banner">{{ message }}</p>{% endif %}
{% if error %}<p class="error-banner">{{ error }}</p>{% endif %}

{% if has_secrets %}
  {% if not key_configured %}
  <p class="warning-banner">
    Secret storage is disabled. Set <code>COMPENDIUM_SECRET_KEY</code> in your
    environment to enable. Run <code>compendium keygen --secret</code> to generate
    a key, then restart the service.
  </p>
  {% elif canary_mismatch %}
  <p class="error-banner">
    <strong>Key mismatch:</strong> <code>COMPENDIUM_SECRET_KEY</code> does not match
    the key used to encrypt stored secrets. Restore the original key, or clear the
    stored values below and re-enter them with the new key.
  </p>
  {% endif %}
{% endif %}

<form method="post">
  <input type="hidden" name="csrf_token" value="{{ csrf_token }}">

  <table class="settings-table">
    <thead>
      <tr>
        <th style="width:35%">Setting</th>
        <th>Value</th>
        <th style="width:5em">Reset</th>
      </tr>
    </thead>
    <tbody>
      {% for row in rows %}
      <tr>
        <td>
          <div class="setting-name">
            {{ row.display_name }}
            {% if row.desc.short_help and row.desc.help_text %}
            <span class="field-hint" data-tooltip="{{ row.desc.help_text }}" data-placement="right">ⓘ</span>
            {% endif %}
          </div>
          <div class="setting-key">{{ row.key }}</div>
          {% if row.desc.short_help %}
          <small class="setting-help">{{ row.desc.short_help }}</small>
          {% else %}
          <small class="setting-help">{{ row.desc.help_text }}</small>
          {% endif %}
          {% if row.env_overridden %}
            {% if row.is_secret %}
            <small class="env-warning">
              ⚠ Overridden by environment variable <code>{{ row.env_var }}</code>.
              The DB value is stored but not read while the env var is set.
            </small>
            {% else %}
            <small class="env-warning">
              ⚠ This parameter was set by environment variable
              <code>{{ row.env_var }}</code> at start time and cannot be
              modified here. Contact your system administrator to make changes.
            </small>
            {% endif %}
          {% endif %}
        </td>
        <td>
          {% if row.is_secret %}
            {% if row.env_overridden %}
            <input type="password" name="{{ row.key }}" placeholder="set via {{ row.env_var }}"
                   autocomplete="new-password" disabled>
            {% elif not key_configured or canary_mismatch %}
            <input type="password" name="{{ row.key }}"
                   placeholder="{% if row.db_set %}••••••••{% else %}not set{% endif %}"
                   autocomplete="new-password" disabled>
            {% else %}
            <input type="password" name="{{ row.key }}"
                   placeholder="{% if row.db_set %}••••••••  (leave blank to keep current){% else %}not set{% endif %}"
                   autocomplete="new-password">
            {% if row.db_set %}<small>Currently set. Enter a new value to rotate, or use Clear to remove.</small>{% endif %}
            {% endif %}
          {% elif row.desc.widget == 'shortcut_picker' %}
            <input type="hidden" name="{{ row.key }}" id="sc-admin-value-{{ row.key }}"
                   value="{{ row.value_str }}"
                   {% if row.env_overridden %}disabled{% endif %}>
            <div id="sc-admin-rows-{{ row.key }}"></div>
            <button type="button" id="sc-admin-add-{{ row.key }}"
                    class="outline" style="margin-top:0.25rem"
                    {% if row.env_overridden %}disabled{% endif %}>+ Add row</button>
            {% if not row.env_overridden %}
            <script nonce="{{ csp_nonce(request) }}">
            (function () {
              var pages = {{ shortcut_pages() | tojson }};
              var rowsDiv = document.getElementById('sc-admin-rows-{{ row.key }}');
              var addBtn = document.getElementById('sc-admin-add-{{ row.key }}');
              var hidden = document.getElementById('sc-admin-value-{{ row.key }}');

              function syncHidden() {
                var urls = [];
                rowsDiv.querySelectorAll('.shortcut-row').forEach(function (div) {
                  var s = div.querySelector('[data-page-select]');
                  if (s && s.value) urls.push(s.value);
                });
                hidden.value = urls.join(', ');
              }

              function makeOptions(sel) {
                var html = '<option value="">— select a page —</option>';
                var currentSection = null;
                pages.forEach(function (p) {
                  if (p.section !== currentSection) {
                    if (currentSection !== null) html += '</optgroup>';
                    html += '<optgroup label="' + p.section + '">';
                    currentSection = p.section;
                  }
                  html += '<option value="' + p.url + '"' + (p.url === sel ? ' selected' : '') + '>' + p.label + '</option>';
                });
                if (currentSection !== null) html += '</optgroup>';
                return html;
              }

              function makeRow(url) {
                var div = document.createElement('div');
                div.className = 'shortcut-row';
                div.style.cssText = 'display:flex; gap:0.5rem; align-items:center; margin-bottom:0.5rem';
                div.innerHTML =
                  '<select data-page-select style="flex:1; margin:0">' + makeOptions(url) + '</select>' +
                  '<button type="button" data-remove class="outline contrast" style="padding:0.2rem 0.5rem; flex-shrink:0">✕</button>';
                div.querySelector('[data-page-select]').addEventListener('change', syncHidden);
                return div;
              }

              rowsDiv.addEventListener('click', function (e) {
                if (e.target.closest('[data-remove]')) {
                  e.target.closest('.shortcut-row').remove();
                  syncHidden();
                }
              });

              addBtn.addEventListener('click', function () {
                if (rowsDiv.querySelectorAll('.shortcut-row').length >= 5) return;
                rowsDiv.appendChild(makeRow(''));
              });

              var initial = hidden.value.split(',').map(function (s) { return s.trim(); }).filter(Boolean);
              initial.forEach(function (u) { rowsDiv.appendChild(makeRow(u)); });
              syncHidden();
            })();
            </script>
            {% endif %}
          {% elif row.desc.widget == 'timezone_picker' %}
            {% set tzp = timezone_picker_data(row.value) %}
            <div class="tz-picker" style="display:flex; gap:0.5rem; flex-wrap:wrap; align-items:center">
              <select id="tz-region-{{ row.key }}" aria-label="Timezone country/region"
                      style="flex:0 0 auto; margin:0"
                      {% if row.env_overridden %}disabled{% endif %}>
                {% for region, zones in tzp.groups %}
                <option value="{{ region }}"
                        {% if not zones %}disabled{% endif %}
                        {% if region == tzp.selected_region %}selected{% endif %}>{{ region }}</option>
                {% endfor %}
              </select>
              <select id="tz-city-{{ row.key }}" name="{{ row.key }}" aria-label="Timezone city"
                      style="flex:1 1 12rem; margin:0"
                      {% if row.env_overridden %}disabled{% endif %}>
                {% for region, zones in tzp.groups if region == tzp.selected_region %}
                  {% for value, label in zones %}
                  <option value="{{ value }}" {% if value == row.value %}selected{% endif %}>{{ label }}</option>
                  {% endfor %}
                {% endfor %}
              </select>
            </div>
            <small>IANA timezone. Default: <code>{{ row.desc.default }}</code></small>
            {% if not row.env_overridden %}
            <script nonce="{{ csp_nonce(request) }}">
            (function () {
              var byRegion = {};
              {{ tzp.groups | tojson }}.forEach(function (g) { byRegion[g[0]] = g[1]; });
              var region = document.getElementById('tz-region-{{ row.key }}');
              var city = document.getElementById('tz-city-{{ row.key }}');
              region.addEventListener('change', function () {
                city.innerHTML = '';
                (byRegion[region.value] || []).forEach(function (z) {
                  var o = document.createElement('option');
                  o.value = z[0];
                  o.textContent = z[1];
                  city.appendChild(o);
                });
              });
            })();
            </script>
            {% endif %}
          {% elif row.is_bool %}
            <label>
              <input type="checkbox" name="{{ row.key }}" value="true"
                     {% if row.value %}checked{% endif %}
                     {% if row.env_overridden %}disabled{% endif %}>
              Enabled
            </label>
          {% elif row.is_literal %}
            <select name="{{ row.key }}" {% if row.env_overridden %}disabled{% endif %}>
              {% for choice in row.choices %}
              <option value="{{ choice }}"
                      {% if row.value == choice %}selected{% endif %}
                      {% if choice in row.unavailable_choices %}disabled{% endif %}>
                {%- if row.key == 'book_metadata_source_preference' -%}
                  {%- if choice == 'googlebooks' -%}
                    Google Books{% if 'googlebooks' in row.unavailable_choices %} (requires API key){% endif %}
                  {%- elif choice == 'openlibrary' -%}
                    Open Library
                  {%- else -%}{{ choice }}{%- endif -%}
                {%- else -%}{{ choice }}{%- endif -%}
              </option>
              {% endfor %}
            </select>
            {% if row.key == 'book_metadata_source_preference' and active_book_source %}
            <small class="form-help" style="margin:0.35rem 0 0">
              Currently using: <strong>{{ active_book_source }}</strong>
            </small>
            {% endif %}
            {% if row.availability_warning %}
            <small class="env-warning">{{ row.availability_warning | safe }}</small>
            {% endif %}
          {% else %}
            <input type="{% if row.is_int %}number{% else %}text{% endif %}"
                   name="{{ row.key }}"
                   value="{{ row.value_str }}"
                   {% if row.is_list %}placeholder="comma-separated, e.g. 3,14,30"{% endif %}
                   {% if row.env_overridden %}disabled{% endif %}>
            <small>
              {{ row.type_repr }}{% if row.desc.nullable %}, optional{% endif %}.
              Default: <code>{{ row.desc.default if row.desc.default is not none else 'unset' }}</code>
            </small>
          {% endif %}
        </td>
        <td class="reset-cell">
          {% if row.is_secret %}
          <label>
            <input type="checkbox" name="clear" value="{{ row.key }}"
                   {% if not key_configured or canary_mismatch %}disabled{% endif %}>
            <span>clear</span>
          </label>
          {% else %}
          <label>
            <input type="checkbox" name="reset" value="{{ row.key }}">
            <span>reset</span>
          </label>
          {% endif %}
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>

  <button type="submit">Save changes</button>
</form>

{% if is_system %}
<p><small>System-tier settings · changes audited under the <code>site_setting</code> entity type.</small></p>
{% else %}
<p><small>Librarian-tier settings · changes audited under the <code>site_setting</code> entity type.</small></p>
{% endif %}

</div><!-- .settings-main -->
</div><!-- .settings-layout -->

{% endblock %}