{% extends "_chat_page.html" %}
{% block title %}{{ ws_name }} - backseat-harness{% endblock %}
{% block main_attrs %} data-auto-refresh="60"{% endblock %}
{% block back %}<a class="chat-header-back" href="/">← Workspaces</a>{% endblock %}
{% block heading %}{{ ws_name }}{% endblock %}
{% block sub %}<small>{{ ws_path }}</small>{% endblock %}
{% block body %}

<section>
  <h4>Active tasks</h4>
  <table class="data-table">
    <thead>
      <tr>
        <th>Task</th>
        <th>Status</th>
        <th>Updated</th>
      </tr>
    </thead>
    <tbody>
      {% for g in generating %}
      <tr class="generation-row">
        <td>From chat {% if g.provider and g.conversation_id %}<a href="/chat/{{ g.provider | urlencode }}/{{ g.conversation_id | urlencode }}?ws={{ ws_id }}"><code>{{ g.source_key }}</code></a>{% else %}<code>{{ g.source_key }}</code>{% endif %}{% if g.reason %}<br><small>{{ g.reason }}</small>{% endif %}{% if g.manager_href %}<br><small><a href="{{ g.manager_href }}">generator transcript</a></small>{% endif %}</td>
        <td><span class="badge" data-status="{{ g.status }}">{{ g.badge }}</span></td>
        <td><small>{{ g.created_at | format_datetime }}</small></td>
      </tr>
      {% endfor %}
      {% for t in incomplete %}
      <tr data-href="/ws/{{ ws_id }}/tasks/{{ t.slug }}">
        <td><a href="/ws/{{ ws_id }}/tasks/{{ t.slug }}">{{ t.slug }}</a></td>
        <td><span class="badge" data-status="{{ t.status }}">{{ t.badge }}</span></td>
        <td><small>{{ t.updated_at | format_datetime }}</small></td>
      </tr>
      {% endfor %}
      {% if not generating and not incomplete %}
      <tr class="empty-row">
        <td colspan="3">No active tasks.</td>
      </tr>
      {% endif %}
    </tbody>
  </table>
</section>

<details id="add-task" class="expander add-task">
  <summary class="expander-plus" title="Add task" aria-label="Add task"></summary>
  <form method="post" action="/ws/{{ ws_id }}/tasks">
    <label for="task-name">Task name</label>
    <input id="task-name" name="name" type="text" placeholder="My task" required>
    <label for="task-goal">Goal prompt</label>
    <textarea id="task-goal" name="goal" rows="3" placeholder="What should be done?" required></textarea>
    <button type="submit" id="add-task-submit" disabled>Add task</button>
  </form>
</details>

<script>
  (function () {
    var name = document.getElementById('task-name');
    var goal = document.getElementById('task-goal');
    var submit = document.getElementById('add-task-submit');
    if (!name || !goal || !submit) return;
    // Mirror services.task.sanitize_slug: NFKD-fold to ASCII, lowercase,
    // collapse every other run to '-', trim leading/trailing '-_', and require
    // something usable to remain; the button also needs a non-empty goal.
    var slug = function (value) {
      return value
        .normalize('NFKD')
        .replace(/[\u0300-\u036f]/g, '')
        .replace(/[^\x00-\x7F]/g, '')
        .toLowerCase()
        .replace(/[^a-z0-9_-]+/g, '-')
        .replace(/^[-_]+|[-_]+$/g, '')
        .replace(/-{2,}/g, '-');
    };
    var sync = function () {
      submit.disabled = !(slug(name.value).length > 0 && goal.value.trim().length > 0);
    };
    name.addEventListener('input', sync);
    goal.addEventListener('input', sync);
    sync();
  })();
</script>

<section>
  <h4>Completed tasks</h4>
  <table class="data-table">
    <thead>
      <tr>
        <th>Task</th>
        <th>Status</th>
        <th>Updated</th>
      </tr>
    </thead>
    <tbody>
      {% for t in complete %}
      <tr data-href="/ws/{{ ws_id }}/tasks/{{ t.slug }}">
        <td><a href="/ws/{{ ws_id }}/tasks/{{ t.slug }}">{{ t.slug }}</a></td>
        <td><span class="badge" data-status="{{ t.status }}">{{ t.badge }}</span></td>
        <td><small>{{ t.updated_at | format_datetime }}</small></td>
      </tr>
      {% else %}
      <tr class="empty-row">
        <td colspan="3">No completed tasks.</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</section>

<section>
  <h4>Other chats</h4>
  <table class="data-table">
    <thead>
      <tr>
        <th>Prompt</th>
        <th>Provider</th>
        <th>Updated</th>
      </tr>
    </thead>
    <tbody>
      {% for c in chats %}
      <tr data-href="/chat/{{ c.provider }}/{{ c.native_id }}?ws={{ ws_id }}">
        <td class="prompt"><a href="/chat/{{ c.provider }}/{{ c.native_id }}?ws={{ ws_id }}">{{ c.prompt }}</a></td>
        <td>{{ c.provider }}</td>
        <td><small>{{ c.mtime | format_datetime }}</small></td>
      </tr>
      {% else %}
      <tr class="empty-row">
        <td colspan="3">No other chats.</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</section>

<details id="new-chat" class="expander new-chat">
  <summary class="expander-plus" title="New chat" aria-label="New chat"></summary>
  <p><strong>New chat</strong></p>
  {% for p in new_chat_providers %}
  <form method="post" action="/ws/{{ ws_id }}/chats">
    <button type="submit" name="provider" value="{{ p.name }}">{{ p.label }}</button>
  </form>
  {% else %}
  <p><small>No supported CLI found on PATH.</small></p>
  {% endfor %}
</details>
{% endblock %}