{% extends "base.html" %}
{% block title %}Auto-Loops — ResearchLoop{% endblock %}
{% block content %}
<h2>Auto-Loops</h2>

<h3>New loop</h3>
<div class="card">
  <form method="post" action="/dashboard/loops/new" onsubmit="var b=this.querySelector('button[type=submit]');if(b.disabled)return false;b.disabled=true;b.textContent='Starting...';">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
    <div class="form-group">
      <label for="study_name">Study</label>
      <select name="study_name" id="study_name" required onchange="updateDefaults()">
        {% for s in studies %}<option value="{{ s }}">{{ s }}</option>{% endfor %}
      </select>
    </div>
    <div class="form-group">
      <label for="count">Number of sprints</label>
      <input type="number" name="count" id="count" value="5" min="1" max="50" required style="width:80px">
    </div>
    <div class="form-group">
      <label for="context">Idea generation guidance <span class="dim">(optional)</span></label>
      <textarea name="context" id="context" rows="2" placeholder="e.g. Focus on X, avoid approach Y, build on results from previous sprints..."></textarea>
    </div>
    <details style="margin-bottom:0.75rem">
      <summary class="dim" style="cursor:pointer;font-size:0.85rem">Resource settings per sprint</summary>
      <div style="display:flex;gap:0.75rem;margin-top:0.5rem;flex-wrap:wrap">
        <div class="form-group" style="margin:0">
          <label for="gpu" style="font-size:0.8rem">GPU</label>
          <input type="text" name="gpu" id="gpu" placeholder="e.g. gpu:1" style="width:140px;font-size:0.85rem">
        </div>
        <div class="form-group" style="margin:0">
          <label for="mem" style="font-size:0.8rem">Memory</label>
          <input type="text" name="mem" id="mem" placeholder="e.g. 64G" style="width:80px;font-size:0.85rem">
        </div>
        <div class="form-group" style="margin:0">
          <label for="cpus" style="font-size:0.8rem">CPUs</label>
          <input type="text" name="cpus" id="cpus" placeholder="e.g. 8" style="width:60px;font-size:0.85rem">
        </div>
      </div>
    </details>
    <button type="submit" class="btn">Start loop</button>
  </form>
</div>

<h3>Loops</h3>
<table>
  <thead><tr><th>ID</th><th>Study</th><th>Status</th><th>Progress</th><th>Current Sprint</th><th>Created</th></tr></thead>
  <tbody>
  {% for lp in loops %}
    <tr>
      <td><a href="/dashboard/loops/{{ lp.id }}">{{ lp.id }}</a></td>
      <td><a href="/dashboard/studies/{{ lp.study_name }}">{{ lp.study_name }}</a></td>
      <td><span class="badge badge-{{ lp.status }}">{{ lp.status }}</span></td>
      <td>{{ lp.completed_count }}/{{ lp.total_count }}</td>
      <td>{% if lp.current_sprint_id %}<a href="/dashboard/sprints/{{ lp.current_sprint_id }}">{{ lp.current_sprint_id }}</a>{% else %}—{% endif %}</td>
      <td class="dim">{{ lp.created_at }}</td>
    </tr>
  {% endfor %}
  </tbody>
</table>
<script>
var studyDefaults={{ study_defaults_json|safe }};
function updateDefaults(){
  var s=document.getElementById('study_name').value;
  var d=studyDefaults[s]||{};
  document.getElementById('gpu').value=d.gpu||'';
  document.getElementById('mem').value=d.mem||'';
  document.getElementById('cpus').value=d.cpus||'';
}
updateDefaults();
</script>
{% endblock %}