{% extends "base.html" %}
{% block title %}Configuration — Airut{% endblock %}
{% block head_extra %}
<link rel="stylesheet" href="{{ static_url('styles/config.css') }}">
{% endblock %}

{% block body %}
<div class="page">
  {% if error %}
  <div class="cfg-banner error">{{ error }}</div>
  {% endif %}

  <h1>Configuration</h1>

  {% if buffer %}
  {# Save bar #}
  <div class="cfg-save-bar">
    <button id="review-save-btn" class="cfg-btn primary" {{ '' if dirty_count else 'disabled' }}
            hx-get="/api/config/diff"
            hx-target="#diff-modal-body"
            hx-swap="innerHTML"
            hx-headers='{"X-Requested-With":"XMLHttpRequest"}'>
      Review &amp; Save
    </button>
    <button id="discard-btn" class="cfg-btn danger" {{ '' if dirty_count else 'disabled' }}
            hx-post="/api/config/discard"
            hx-headers='{"X-Requested-With":"XMLHttpRequest"}'
            hx-confirm="Discard all unsaved changes?">
      Discard
    </button>
    <span id="dirty-count" class="cfg-dirty {{ '' if dirty_count else 'hidden' }}">
      {%- if dirty_count -%}
        {{ dirty_count }} unsaved change{{ 's' if dirty_count != 1 else '' }}
      {%- endif -%}
    </span>
  </div>

  {# Stale banner #}
  {% if stale %}
  <div class="cfg-banner warning">
    Config changed externally since you started editing. Unsaved changes may be lost.
    <a href="/config">Reload</a>
  </div>
  {% endif %}

  {# Server Settings #}
  <h2 class="section-title">Server Settings</h2>

  {# Execution card #}
  <div class="card">
    <h2>Execution</h2>
    {% for f in schema %}
    {% if f.path in ['execution.max_concurrent', 'execution.shutdown_timeout', 'execution.conversation_max_age_days', 'execution.image_prune'] %}
    {% include "components/config/field.html" %}
    {% endif %}
    {% endfor %}
  </div>

  {# Dashboard card #}
  <div class="card">
    <h2>Dashboard</h2>
    {% for f in schema %}
    {% if f.path in ['dashboard.enabled', 'dashboard.host', 'dashboard.port', 'dashboard.base_url'] %}
    {% include "components/config/field.html" %}
    {% endif %}
    {% endfor %}
  </div>

  {# Network card #}
  <div class="card">
    <h2>Network</h2>
    {% for f in schema %}
    {% if f.path in ['network.upstream_dns'] %}
    {% include "components/config/field.html" %}
    {% endif %}
    {% endfor %}
  </div>

  {# Variables section #}
  <h2 class="section-title">Variables</h2>
  <div class="card">
    <span class="cfg-help">Shared values referenced as variables in field values.</span>
    {% include "components/config/vars.html" %}
  </div>

  {# Repositories section #}
  <h2 class="section-title">Repositories</h2>
  {% if repos %}
  {% for repo in repos %}
  <div class="cfg-repo-card">
    <div>
      <span class="cfg-repo-name">{{ repo.id }}</span>
      <span class="cfg-repo-meta">
        {% for ch in repo.channels %}
        <span class="cfg-scope cfg-repo">{{ ch }}</span>
        {% endfor %}
        · model: {{ repo.model }}
      </span>
    </div>
    <a href="/config/repos/{{ repo.id }}" class="cfg-btn">Edit</a>
  </div>
  {% endfor %}
  {% else %}
  <div class="empty">No repositories configured.</div>
  {% endif %}
  <form class="cfg-add-repo"
        hx-post="/api/config/add"
        hx-headers='{"X-Requested-With":"XMLHttpRequest"}'
        hx-swap="none">
    <input type="hidden" name="path" value="repos">
    <input id="new-repo-id" class="cfg-input cfg-input-inline" type="text" name="key"
           placeholder="new-repo-id"
           required pattern="[a-zA-Z0-9][a-zA-Z0-9._-]*">
    <button class="cfg-btn primary" type="submit">Add Repository</button>
  </form>

  {# Diff dialog #}
  <dialog id="diff-modal" class="cfg-dialog">
    <div class="cfg-dialog-header">Review Changes</div>
    <div id="diff-modal-body">Loading...</div>
    <div id="save-feedback"></div>
    <div class="cfg-dialog-footer">
      <button class="cfg-btn primary"
              hx-post="/api/config/save"
              hx-target="#save-feedback"
              hx-swap="innerHTML"
              hx-headers='{"X-Requested-With":"XMLHttpRequest"}'>
        Confirm Save
      </button>
      <button type="button" class="cfg-btn" id="diff-cancel-btn">Cancel</button>
    </div>
  </dialog>
  {% endif %}
</div>
{% endblock %}

{% block scripts %}
<script src="{{ static_url('vendor/htmx.min.js') }}"></script>
<script src="{{ static_url('js/config-editor.js') }}"></script>
{% endblock %}