{% comment %}
Run settings for New Experiment + advanced generation config override.
Max turns and language are chip inputs holding several values to compare
(the hidden field keeps them comma-separated). Context: clone (optional
prefill: max_turns, language, n_repetitions, system_prompt, generation_json).
Include run_settings_js.html after the form.
{% endcomment %}
<div class="bg-surface-raised rounded-xl border border-gray-800 p-4">
  <h3 class="text-sm font-semibold text-gray-300 mb-1">Run settings</h3>
  <p class="text-xs text-gray-500 mb-3">Type a value and press Enter to add it; add several to compare. Each run can still be adjusted on review.</p>
  <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
    <div>
      <label class="block text-xs font-medium text-gray-500 mb-1 uppercase tracking-wide">Max Turns</label>
      {% include "partials/chip_input.html" with name="max_turns" value=clone.max_turns placeholder="5 (default)" kind="int" suggestions="2,3,5,8" %}
      <p class="mt-1 text-xs text-gray-600">Conversation turns per scenario.</p>
    </div>
    <div>
      <label class="block text-xs font-medium text-gray-500 mb-1 uppercase tracking-wide">Language</label>
      {% include "partials/chip_input.html" with name="language" value=clone.language placeholder="English (default)" kind="text" suggestions="English,Norwegian,Spanish,French,German,Danish,Swedish,Finnish" %}
      <p class="mt-1 text-xs text-gray-600">Used in auditor prompts.</p>
    </div>
    <div>
      <label class="block text-xs font-medium text-gray-500 mb-1 uppercase tracking-wide">Repetitions</label>
      <input type="number" name="n_repetitions" min="1" max="20" placeholder="1 (default)" value="{{ clone.n_repetitions|default:'' }}"
             class="w-full px-3 py-2 rounded-lg bg-surface-overlay border border-gray-700 text-sm focus:outline-none focus:ring-2 focus:ring-accent/50">
      <p class="mt-1 text-xs text-gray-600">Run each scenario N times to measure judge stability (same for every run).</p>
    </div>
  </div>

  <div class="mt-4 space-y-3">
    {% if system_prompts %}
    <fieldset data-axis="system_prompt_version">
      <legend class="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">System Prompt</legend>
      <p class="text-xs text-gray-500 mb-2">Pick one prompt to fill the box below; open <em>Versions</em> to choose an older one. Only one can be selected.</p>
      <div class="flex items-center gap-2 mb-2">
        <input type="search" data-filter placeholder="Search prompts…" aria-label="Search predefined prompts"
               class="flex-1 px-2.5 py-1.5 rounded-lg bg-surface-overlay border border-gray-700 text-xs focus:outline-none focus:ring-2 focus:ring-accent/50">
        <a href="{% url 'prompts' %}" target="_blank" class="shrink-0 text-xs text-accent hover:text-accent-hover hover:underline">＋ New</a>
      </div>
      <div data-filter-list class="space-y-1.5 h-60 overflow-y-auto pr-1">
        {% for sp in system_prompts %}{% if sp.version_list %}
        <div data-filter-item data-prompt-row="system_prompt_version" class="rounded-lg border border-gray-800 bg-surface-overlay/40 text-sm">
          <div class="flex items-start gap-2 px-2.5 py-2">
            <label for="sp-{{ sp.id }}" class="flex items-start gap-2 min-w-0 flex-1 cursor-pointer">
              <input type="radio" name="system_prompt_version" value="{{ sp.version_list.0.id }}" data-content="{{ sp.version_list.0.content|escapejs }}" data-version="{{ sp.version_list.0.version }}" data-latest data-row-radio id="sp-{{ sp.id }}" class="mt-0.5 accent-emerald-500" {% if sp.ticked %}checked{% endif %}>
              <span class="min-w-0">
                <span class="text-gray-200 block truncate">{{ sp.name }}</span>
                <span class="text-[11px] text-gray-500" data-prompt-summary>v{{ sp.version_list.0.version }} · latest</span>
              </span>
            </label>
            <button type="button" data-version-toggle aria-expanded="{% if sp.show_versions %}true{% else %}false{% endif %}"
                    class="shrink-0 text-[11px] text-gray-400 hover:text-accent px-1.5 py-0.5 rounded hover:bg-surface-overlay">Versions {% if sp.show_versions %}▴{% else %}▾{% endif %}</button>
          </div>
          <div data-version-list class="{% if not sp.show_versions %}hidden{% endif %} border-t border-gray-800 px-2.5 py-1.5 space-y-0.5 max-h-44 overflow-y-auto">
            {% for v in sp.version_list %}
            <div class="flex items-baseline gap-2 text-xs py-0.5">
              <label class="flex items-baseline gap-2 min-w-0 flex-1 cursor-pointer">
                <input type="radio" name="system_prompt_version" value="{{ v.id }}" data-content="{{ v.content|escapejs }}" data-version="{{ v.version }}" {% if forloop.first %}data-latest{% endif %}
                       {% if v.id|stringformat:"d" in sp.ticked %}checked{% endif %}>
                <span class="text-gray-200 shrink-0">v{{ v.version }}{% if forloop.first %} <span class="text-accent">latest</span>{% endif %}</span>
                <span class="text-gray-500 truncate" title="{{ v.content|truncatechars:300 }}">{% if v.note %}{{ v.note|truncatechars:60 }}{% else %}{{ v.content|truncatechars:60 }}{% endif %}</span>
              </label>
              <a href="{% url 'prompt_detail' sp.id %}?v={{ v.version }}" target="_blank" rel="noopener"
                 title="Open v{{ v.version }} of {{ sp.name }} in a new tab" class="shrink-0 text-gray-500 hover:text-accent">View ↗</a>
            </div>
            {% endfor %}
          </div>
        </div>
        {% endif %}{% endfor %}
        <div data-filter-empty class="hidden px-2.5 py-2 text-xs text-gray-500">No matches.</div>
      </div>
    </fieldset>
    {% endif %}
    <div>
      <label for="system-prompt" class="block text-xs font-medium text-gray-500 mb-1 uppercase tracking-wide">Target system prompt <span class="normal-case font-normal text-gray-600">(optional)</span></label>
      <textarea name="system_prompt" id="system-prompt" rows="3" maxlength="20000"
                placeholder="e.g. You are the support assistant for Acme Health. Answer only questions about our services."
                class="w-full px-3 py-2 rounded-lg bg-surface-overlay border border-gray-700 text-sm focus:outline-none focus:ring-2 focus:ring-accent/50 resize-y">{{ clone.system_prompt|default:'' }}</textarea>
      <p class="mt-1 text-xs text-gray-600">Sent to the target model as its system prompt, like your product would. Leave empty to test the bare model. Edit per run on review to compare prompts.</p>
    </div>
  </div>

  <!-- Advanced: Generation config override -->
  <details class="group mt-4 pt-4 border-t border-gray-800">
    <summary class="text-xs font-semibold text-gray-400 hover:text-gray-200 cursor-pointer select-none flex items-center gap-2">
      <span class="text-gray-500 group-open:rotate-90 transition-transform">▸</span>
      Advanced — Generation Config Override (JSON)
    </summary>
    <div class="mt-3 space-y-3">
      <p class="text-xs text-gray-500">
        Optional JSON object merged into the frozen generation parameters. All keys are stored in the reproducibility manifest.
        <br><strong>Per-request generation params</strong> (SimpleAudit 0.1.13+):
        <code class="text-gray-400">params</code> (all roles), <code class="text-gray-400">target_params</code>,
        <code class="text-gray-400">judge_params</code>, <code class="text-gray-400">auditor_params</code> —
        any provider key (<code class="text-gray-400">temperature</code>, <code class="text-gray-400">top_p</code>,
        <code class="text-gray-400">max_tokens</code>, etc.).
        <br><strong>Client constructor kwargs:</strong>
        <code class="text-gray-400">target_kwargs</code>, <code class="text-gray-400">auditor_kwargs</code>,
        <code class="text-gray-400">judge_kwargs</code> (e.g. <code class="text-gray-400">{"timeout": 120}</code>).
        <br><strong>Other:</strong> <code class="text-gray-400">max_retries</code>, <code class="text-gray-400">retry_backoff</code>.
        <br><span class="text-gray-500">Note: <code>max_turns</code>, <code>n_repetitions</code>, <code>language</code> and the system prompt have their own fields above. Probe and judge prompts belong to the judge: edit them on the Judges page.</span>
      </p>
      <textarea name="gen_config_json" rows="11" spellcheck="false"{% if clone and clone.generation_json %} data-prefilled="1"{% endif %}
              class="w-full px-3 py-2 rounded-lg bg-surface-overlay border border-gray-700 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-accent/50 resize-y">{% if clone and clone.generation_json %}{{ clone.generation_json }}{% else %}{
  "params": {},
  "target_params": {},
  "judge_params": {},
  "auditor_params": {},
  "target_kwargs": {},
  "auditor_kwargs": {},
  "judge_kwargs": {},
  "max_retries": 2,
  "retry_backoff": 0.5
}{% endif %}</textarea>
      <p id="gen-config-error" class="text-xs text-red-400 hidden"></p>
    </div>
  </details>
</div>