{% extends "base.html" %}
{% block content %}
<div class="card">
    <h2>Chapter {{ chapter_id }}: {{ chapter.title or 'Untitled' }}</h2>
    <p style="color:#94a3b8">{{ utterances|length }} utterances | {{ chapter.word_count or 0 }} words</p>
</div>

<div class="chapter-nav">
    {% for i in range(1, total_chapters + 1) %}
    <a href="/chapters/{{ i }}" class="{{ 'active' if i == chapter_id }}">{{ i }}</a>
    {% endfor %}
</div>

<div class="card">
    <button class="btn btn-approve"
            hx-post="/api/chapters/{{ chapter_id }}/approve">
        Approve Chapter
    </button>
</div>

<div id="utterance-list"
     hx-get="/chapters/{{ chapter_id }}/partial"
     hx-trigger="load"
     hx-swap="innerHTML">
    <p>Loading utterances...</p>
</div>
{% endblock %}