{% extends "base.html" %}

{% block title %}Thought Stream{% endblock %}

{% block extra_styles %}{% endblock %}

{% block content %}
<div class="container thinking-container py-4">

  <div class="thinking-header mb-4">
    <div class="thinking-title">Thought Stream</div>
    <div class="thinking-subtitle">
      Inner monologue &mdash; always thinking, always pondering.
    </div>
  </div>

  <div class="card mc-panel">
    <div class="card-header mc-panel-header d-flex justify-content-between align-items-center">
      <span>// INNER THOUGHTS</span>
      <span class="badge" style="background:var(--purple-dim); color:var(--purple);">{{ thoughts | length }} thoughts</span>
    </div>
    <div class="card-body p-3"
         id="thought-stream"
         hx-get="/thinking/api"
         hx-trigger="every 60s"
         hx-swap="innerHTML"
         hx-select-oob="false">

      {% if thoughts %}
        {% for thought in thoughts %}
        <div class="thought-card">
          <div class="thought-meta">
            <span class="seed-badge seed-{{ thought.seed_type }}">{{ thought.seed_type }}</span>
            <span class="thought-time">{{ thought.created_at[:19] }}</span>
            {% if thought.parent_id %}
            <a href="/thinking/api/{{ thought.id }}/chain" class="thought-chain-link" title="View thought chain">chain</a>
            {% endif %}
          </div>
          <div class="thought-content">{{ thought.content | e }}</div>
        </div>
        {% endfor %}
      {% else %}
        <div class="no-thoughts">
          No thoughts generated yet. The thinking thread will begin shortly after startup.
        </div>
      {% endif %}

    </div>
  </div>

</div>
{% endblock %}
