{% extends 'base.html' %}
{% from 'components/ui.html' import page_header, panel, choice_card, select_field, tab_link %}

{% block title %}Settings · Woltspace{% endblock %}

{% block content %}
<div class="ds-page settings-page" data-settings-root data-default-harness="{{ harness_default }}">
  {% call page_header('Lodge controls', 'Settings', 'Shape how the lodge behaves without reaching for a config file.') %}
    <span class="ds-save-state" data-global-state role="status" aria-live="polite">
      <span class="ds-save-dot"></span><span data-global-message>Changes save here</span>
    </span>
  {% endcall %}

  <div class="settings-layout">
    <nav class="settings-index" aria-label="Settings sections">
      <p class="settings-index-label">Configuration</p>
      {{ tab_link('#harnesses', 'Harnesses', 'lodge default', active=true) }}
      {{ tab_link('#sessions', 'Sessions', 'idle policy') }}
      {{ tab_link('', 'Notifications', 'coming down the trail', disabled=true) }}
      {{ tab_link('', 'Desktop', 'after the Mac build', disabled=true) }}
    </nav>

    <div class="settings-content" id="harnesses">
      {% call panel('Lodge harness', 'Used when a wolt follows the lodge setting.', 'new sessions') %}
        <fieldset class="ds-choice-group" data-default-form data-saved-value="{{ harness_default }}">
          <legend class="sr-only">Default agent engine</legend>
          {% for harness in harnesses %}
            {{ choice_card(
              'default-harness',
              harness.id,
              harness.label,
              '',
              '',
              harness.id == harness_default,
              harness.emoji
            ) }}
          {% endfor %}
        </fieldset>
      {% endcall %}

      <div class="ds-callout" role="note">
        <span class="ds-callout-icon" aria-hidden="true">🌿</span>
        <div><strong>New sessions only</strong><p>Sessions already running keep the harness they started with.</p></div>
      </div>

      <div id="sessions">
      {% call panel('Idle sessions', 'Close sessions nobody has been in touch with, to free resources. Their conversation stays resumable.', 'lodge-wide') %}
        {% call select_field('idle-session-timeout', 'Close idle sessions after', 'No contact means no message, notify or page update from the session for this long.') %}
          <div class="ds-select-stack" data-expiry-row data-saved-value="{{ idle_timeout if idle_timeout is not none else '' }}">
            <select class="ds-select" id="idle-session-timeout" data-expiry-select>
              <option value=""{% if idle_timeout is none %} selected{% endif %}>Never</option>
              <option value="3600"{% if idle_timeout == 3600 %} selected{% endif %}>1 hour</option>
              <option value="14400"{% if idle_timeout == 14400 %} selected{% endif %}>4 hours</option>
              <option value="86400"{% if idle_timeout == 86400 %} selected{% endif %}>1 day</option>
            </select>
          </div>
        {% endcall %}
      {% endcall %}
      </div>
    </div>
  </div>
</div>

<div class="ds-toast" data-toast role="status" aria-live="polite" aria-atomic="true">
  <span class="ds-toast-icon" data-toast-icon>✓</span>
  <span data-toast-message>Saved</span>
</div>
{% endblock %}

{% block scripts %}
<script type="module" src="/static/settings.js?v={{ cache_bust }}"></script>
{% endblock %}