{% 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,
              '',
              'experimental' if harness.experimental else '',
              harness.id == harness_default,
              harness.emoji,
              icon=harness.icon
            ) }}
          {% 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>

      {% set tier_rows = [('raccoon', 'Raccoon', 'thinker'), ('beaver', 'Beaver', 'builder'), ('otter', 'Otter', 'quick')] %}
      {% call panel('Default models', 'The model a wolt gets for each working style. A wolt with its own model keeps it.', 'new sessions') %}
        {% for harness in harnesses if not harness.freeform_model and harness.catalog %}
          {% set labels = {} %}
          {% for model in harness.catalog %}{% set _ = labels.update({model.id: model.label}) %}{% endfor %}
          <p class="ds-label settings-tier-harness">{{ harness.label }}</p>
          {% for tier, title, pace in tier_rows %}
            {% set field_id = 'tier-' ~ harness.id ~ '-' ~ tier %}
            {% set current = harness.models[tier] %}
            {% call select_field(field_id, title, pace) %}
              <div class="ds-select-stack" data-tier-row data-saved-value="{{ current }}">
                <select class="ds-select" id="{{ field_id }}" data-tier-select data-harness="{{ harness.id }}" data-harness-label="{{ harness.label }}" data-tier="{{ tier }}" data-tier-label="{{ title }}">
                  {% if current not in labels %}<option value="{{ current }}" selected>{{ current }}</option>{% endif %}
                  {% for model in harness.catalog %}
                    <option value="{{ model.id }}"{% if current == model.id %} selected{% endif %}>{{ model.label }}</option>
                  {% endfor %}
                </select>
              </div>
            {% endcall %}
          {% endfor %}
        {% endfor %}
      {% endcall %}

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