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

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

{% block content %}
<section id="agent-filter" class="tc-agent-workbench" aria-label="Agent workbench filters">
  <div class="tc-filter-row">
    <span class="tc-filter-label">Agent</span>
    <div class="tc-filter-options">
      {% for role in role_cards %}
      <a class="tc-agent-chip {% if role.role == selected_agent.role %}is-selected{% endif %}" href="{{ role.web_href }}">
        <span>{{ role.group|default:"head" }}</span>
        <strong>{{ role.label|default:role.role }}</strong>
        <small>{{ role.role }}</small>
      </a>
      {% endfor %}
    </div>
  </div>
  <div class="tc-filter-row tc-filter-row--view">
    <span class="tc-filter-label">View</span>
    <div class="tc-segmented-control" aria-label="Agent detail view">
      <a class="{% if active_panel == "skills" %}is-selected{% endif %}" href="{{ skills_panel_href }}">Skills</a>
      <a class="{% if active_panel == "notes" %}is-selected{% endif %}" href="{{ notes_panel_href }}">Additional instructions</a>
    </div>
  </div>
</section>

{% if active_panel == "notes" %}
<section id="notes-panel" class="tc-panel tc-instruction-editor tc-notes-panel">
  <div class="tc-panel-head">
    <div>
      <span class="tc-eyebrow">Project-local instructions</span>
      <h2>Additional instructions</h2>
    </div>
    <div class="tc-panel-actions">
      <span class="tc-help" tabindex="0" role="img" aria-label="Additional instructions guidance" data-tooltip="Project-specific preferences only. Do not use additional instructions to change role identity, action permissions, approval authority, execution authority, or secret access.">?</span>
    </div>
  </div>
  <div class="tc-alert">
    <strong>Role addendum</strong>
  </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>Text <textarea name="body" rows="8" placeholder="Example: Keep summaries concise for this project. Keep source-as-of warnings explicit.">{{ additional_instructions.body }}</textarea></label>
    <button class="tc-button" type="submit">Save</button>
  </form>
</section>
{% else %}

<section id="skill-browser" 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.label|default:selected_agent.role }}</h2>
        <p class="tc-muted">{{ selected_agent.role }}</p>
      </div>
    </div>

    <section class="tc-skill-section">
      <div class="tc-skill-section-head">
        <strong>Required skills</strong>
      </div>
      <div class="tc-skill-list">
        {% for skill in required_skills %}
        <a class="tc-skill-link {% if skill.selected %}is-selected{% endif %}" href="{{ skill.web_href }}">
          <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>
      </div>
      <div class="tc-skill-list">
        {% for skill in optional_skills %}
        <a class="tc-skill-link {% if skill.selected %}is-selected{% endif %}" href="{{ skill.web_href }}">
          <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">Skill preview</span>
        <h2>{{ selected_skill_id|default:"No skill selected" }}</h2>
      </div>
    </div>
    {% if skill_preview.metadata_items %}
    <div class="tc-frontmatter-card">
      <div class="tc-frontmatter-head">
        <span class="tc-eyebrow">Skill details</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>
{% endif %}
{% endblock %}