{% extends "web/base.html" %}

{% block title %}Agents | tcx{% endblock %}
{% block page_label %}Agents{% endblock %}

{% block content %}
<section class="tc-agent-roster">
  <a class="tc-role-card tc-role-card--head {% if head_manager.role == selected_agent.role %}is-selected{% endif %}" href="/harness/agents/?role={{ head_manager.role }}">
    <span class="tc-eyebrow">Head Manager</span>
    <strong>{{ head_manager.role }}</strong>
    <small>{{ head_manager.builtin_skills|length }} required skills</small>
  </a>

  <div class="tc-role-grid">
    {% for role in agents %}
    <a class="tc-role-card {% if role.role == selected_agent.role %}is-selected{% endif %}" href="/harness/agents/?role={{ role.role }}">
      <span>{{ role.group }}</span>
      <strong>{{ role.role }}</strong>
      <small>{{ role.builtin_skills|length }} required · {{ role.optional_skill_count }} optional</small>
    </a>
    {% endfor %}
  </div>
</section>

<section class="tc-panel tc-instruction-editor">
  <div class="tc-panel-head">
    <div>
      <span class="tc-eyebrow">Project-local instructions</span>
      <h2>Additional instructions</h2>
    </div>
    <span class="tc-chip">{{ additional_instructions.line_count }} lines</span>
  </div>
  <div class="tc-alert">
    <strong>Appended after the default role instructions</strong>
    <span>Use this for project-specific preferences. TradingCodex saves this text as-is and does not block it; avoid using it to change role identity, MCP permissions, approval authority, execution authority, or secret access.</span>
  </div>
  <form class="tc-form" method="post" action="{% url 'web-agent-instruction-update' selected_agent.role %}">
    {% csrf_token %}
    <input type="hidden" name="next" value="{{ request.get_full_path }}">
    <label>Instruction text <textarea name="body" rows="8" placeholder="Example: Prefer concise Korean summaries for this project. Keep source-as-of warnings explicit.">{{ additional_instructions.body }}</textarea></label>
    <button class="tc-button" type="submit">Save and project</button>
  </form>
</section>

<section class="tc-skill-browser">
  <aside class="tc-panel tc-skill-sidebar">
    <div class="tc-panel-head">
      <div>
        <span class="tc-eyebrow">{{ selected_agent.group }}</span>
        <h2>{{ selected_agent.role }}</h2>
      </div>
      <span class="tc-pill tc-pill--{% if selected_agent.validation_errors %}bad{% else %}good{% endif %}">
        {% if selected_agent.validation_errors %}blocked{% else %}valid{% endif %}
      </span>
    </div>

    <section class="tc-skill-section">
      <div class="tc-skill-section-head">
        <strong>Required skills</strong>
        <span>{{ required_skills|length }}</span>
      </div>
      <div class="tc-skill-list">
        {% for skill in required_skills %}
        <a class="tc-skill-link {% if skill.selected %}is-selected{% endif %}" href="/harness/agents/?role={{ selected_agent.role }}&amp;skill={{ skill.id }}">
          <span>{{ skill.label }}</span>
          <small>{{ skill.id }}</small>
        </a>
        {% endfor %}
      </div>
    </section>

    <section class="tc-skill-section">
      <div class="tc-skill-section-head">
        <strong>Optional skills</strong>
        <span>{{ optional_skills|length }}</span>
      </div>
      <div class="tc-skill-list">
        {% for skill in optional_skills %}
        <a class="tc-skill-link {% if skill.selected %}is-selected{% endif %}" href="/harness/agents/?role={{ selected_agent.role }}&amp;skill={{ skill.id }}">
          <span>{{ skill.label }}</span>
          <small>{{ skill.id }} · {{ skill.validation_status }}</small>
        </a>
        {% empty %}
        <div class="tc-empty-state">
          <strong>No optional skills</strong>
          <span>This role is using only required skills.</span>
        </div>
        {% endfor %}
      </div>
    </section>
  </aside>

  <article class="tc-panel tc-preview-panel">
    <div class="tc-panel-head">
      <div>
        <span class="tc-eyebrow">Markdown preview</span>
        <h2>{{ selected_skill_id|default:"No skill selected" }}</h2>
      </div>
      <span class="tc-chip">{{ skill_preview.source_label }}</span>
    </div>
    {% if skill_preview.metadata_items %}
    <div class="tc-frontmatter-card">
      <div class="tc-frontmatter-head">
        <span class="tc-eyebrow">Frontmatter</span>
      </div>
      <dl class="tc-frontmatter-grid">
        {% for item in skill_preview.metadata_items %}
        <div class="tc-frontmatter-item">
          <dt>{{ item.label }}</dt>
          <dd>{{ item.value }}</dd>
        </div>
        {% endfor %}
      </dl>
    </div>
    {% endif %}
    <div class="tc-markdown-preview">
      {{ skill_preview.html|safe }}
    </div>
  </article>
</section>
{% endblock %}