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

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

{% block content %}
{% if strategy_mode == "detail" %}
<div class="tc-page-toolbar">
  <a class="tc-button" href="/harness/strategies/">Back to list</a>
</div>
{% endif %}

{% if strategy_mode == "detail" and selected_strategy %}
<article class="tc-panel tc-preview-panel tc-document-panel">
  <div class="tc-panel-head">
    <div>
      <span class="tc-eyebrow">Markdown preview</span>
      <h2>{{ selected_strategy.heading }}</h2>
    </div>
  </div>
  {% if strategy_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 strategy_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">
    {{ strategy_preview.html|safe }}
  </div>
</article>
{% else %}
<article class="tc-panel tc-list-panel tc-library-panel">
  <div class="tc-panel-head">
    <div>
      <span class="tc-eyebrow">Library</span>
      <h2>{{ strategies|length }} strategies</h2>
      <p class="tc-muted">Create and update strategies from Codex with $strategy-creator.</p>
    </div>
  </div>
  <div class="tc-record-list">
    {% for strategy in strategies %}
    <article class="tc-record-row">
      <a class="tc-record-main" href="/harness/strategies/?name={{ strategy.name|urlencode }}">
        <div class="tc-chip-list">
          <span class="tc-pill tc-pill--{% if strategy.active %}good{% elif strategy.status == 'archived' %}neutral{% else %}warn{% endif %}">{{ strategy.status }}</span>
        </div>
        <strong>{{ strategy.heading }}</strong>
        {% if strategy.description %}
        <small>{{ strategy.description }}</small>
        {% endif %}
      </a>
    </article>
    {% empty %}
    <div class="tc-empty-state">
      <strong>No strategies</strong>
    </div>
    {% endfor %}
  </div>
</article>
{% endif %}
{% endblock %}