{% extends "base.html" %}
{% block title %}Pending{% endblock %}
{% block content %}
<h1>Pending Memories <span class="badge">{{ pending|length }}</span></h1>
{% if pending %}
<div id="pending-list">
{% for p in pending %}

{% if p.obs_type == 'session_summary' %}
<div class="card card-session-summary" id="card-{{ p.id }}">
  <div class="meta">
    <span class="type obs-session_summary">SESSION SUMMARY</span>
    {% if p.source_tool %}<span class="source-tool">{{ p.source_tool | replace('_', ' ') | upper }}</span>{% endif %}
    {% if p.project_path %}<span class="project-name">{{ p.project_path.split('/')[-1] }}</span>{% endif %}
  </div>
  <h2 class="memory-title">{{ p.title }}</h2>
  {% if p.narrative %}<div class="ss-section"><span class="ss-label">SUMMARY</span><p>{{ p.narrative }}</p></div>{% endif %}
  {% if p.facts %}<div class="ss-section"><span class="ss-label">COMPLETED</span><ul>{% for item in p.facts %}<li>{{ item }}</li>{% endfor %}</ul></div>{% endif %}
  {% if p.evidence %}<div class="ss-section"><span class="ss-label">NEXT STEPS</span><p>{{ p.evidence }}</p></div>{% endif %}
  <div class="actions">
    <button hx-post="/api/pending/{{ p.id }}/confirm" hx-vals='{"final_content":""}' hx-target="#card-{{ p.id }}" hx-swap="outerHTML" class="btn-approve">Approve</button>
    <button hx-post="/api/pending/{{ p.id }}/reject" hx-target="#card-{{ p.id }}" hx-swap="outerHTML" class="btn-reject">Reject</button>
  </div>
</div>

{% else %}
<div class="card" id="card-{{ p.id }}">
  <div class="meta">
    <span class="type obs-{{ p.obs_type }}">{{ p.obs_type | upper | replace('_', ' ') }}</span>
    <span class="type type-{{ p.type }}">{{ p.type }}</span>
    {% if p.source_tool %}<span class="source-tool">{{ p.source_tool | replace('_', ' ') | upper }}</span>{% endif %}
    {% if p.project_path %}<span class="project-name">{{ p.project_path.split('/')[-1] }}</span>{% endif %}
    <span class="conf">{{ (p.confidence * 100)|int }}%</span>
    {% if p.facts %}
    <div class="tab-btns">
      <button class="tab-btn active" onclick="showTab('{{ p.id }}', 'facts', this)">facts</button>
      <button class="tab-btn" onclick="showTab('{{ p.id }}', 'narrative', this)">narrative</button>
    </div>
    {% endif %}
  </div>

  <h3 class="memory-title">{{ p.title }}</h3>

  {% if p.facts %}
  <div id="tab-facts-{{ p.id }}" class="tab-content">
    <ul class="facts-list">{% for f in p.facts %}<li>{{ f }}</li>{% endfor %}</ul>
  </div>
  <div id="tab-narrative-{{ p.id }}" class="tab-content" style="display:none">
    <p class="narrative">{{ p.narrative }}</p>
  </div>
  {% else %}
  <p class="narrative">{{ p.narrative }}</p>
  {% endif %}

  {% if p.tags %}
  <div class="tags">{% for t in p.tags %}<span class="tag">{{ t }}</span>{% endfor %}</div>
  {% endif %}

  {% if p.evidence %}
  <p class="evidence">"{{ p.evidence }}"</p>
  {% endif %}

  <div class="meta-footer">
    <span class="created-at">{{ p.created_at[:16] if p.created_at else '' }}</span>
    {% if p.files_mentioned %}
    <span class="files">{% for f in p.files_mentioned %}<code>{{ f.split('/')[-1] }}</code> {% endfor %}</span>
    {% endif %}
  </div>

  <div class="actions">
    <button hx-post="/api/pending/{{ p.id }}/confirm" hx-vals='{"final_content":""}' hx-target="#card-{{ p.id }}" hx-swap="outerHTML" class="btn-approve">Approve</button>
    <button hx-post="/api/pending/{{ p.id }}/reject" hx-target="#card-{{ p.id }}" hx-swap="outerHTML" class="btn-reject">Reject</button>
    <button onclick="showEdit('{{ p.id }}')" class="btn-edit">Edit</button>
  </div>
  <div id="edit-{{ p.id }}" style="display:none">
    <textarea id="txt-{{ p.id }}">{{ p.title }}</textarea>
    <button onclick="submitEdit('{{ p.id }}')" class="btn-approve">Save &amp; Approve</button>
  </div>
</div>
{% endif %}

{% endfor %}
</div>
{% else %}
<p class="empty">No pending memories.</p>
{% endif %}
{% endblock %}