{% extends "base.html" %}
{% block header_extra %}
{# Spec 30: language selector beside Active project - shows per-language progress #}
<div style="display:flex; align-items:center; gap:0.75rem; margin:-1rem 0 1.5rem; padding:0.6rem 0.9rem; background:#16213e; border:1px solid #333; border-radius:8px;">
    <label for="lang-select" style="color:#94a3b8; font-size:0.9rem; white-space:nowrap;">
        Content language:
    </label>
    <select id="lang-select"
            onchange="window.location.href = '/chapters-audio?lang=' + this.value;"
            style="background:#0f3460; color:#e0e7ff; border:1px solid #7c3aed;
                   border-radius:4x; padding:0.4rem 0.75rem; font-size:0.95rem;
                   font-weight:600; cursor:pointer; min-width:10rem;">
        {% for code, name in languages %}
        <option value="{{ code }}" {% if code == active_language %}selected{% endif %}>{{ name }}</option>
        {% endfor %}
    </select>
    <span style="color:#64748b; font-size:0.8rem;">
        Applies to all chapters — navigation, buttons and statuses stay English.
    </span>
</div>
{% endblock %}

{% block content %}
<div class="card">
    <h2>Chapter Audio Review</h2>
    <p style="color:#94a3b8">Review generated audio for each chapter. Click a chapter to see individual utterances.</p>
    <p style="color:#64748b; font-size:0.9rem; margin-top:0.5rem">Total: {{ total_chapters }} chapters with audio</p>
</div>

<table>
    <thead>
        <tr>
            <th>#</th>
            <th>Chapter</th>
            <th>Audio Files</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        {% for chapter in chapters %}
        <tr>
            <td>
                <strong>{{ loop.index }}</strong>
            </td>
            <td>
                {{ chapter.title }}
            </td>
            <td>
                <span class="badge badge-green">{{ chapter.audio_count }} utterances</span>
            </td>
            <td>
                <a href="/chapters-audio/{{ chapter.directory }}" class="btn btn-generate" style="font-size:0.8rem; padding:0.3rem 0.6rem; text-decoration:none">
                    Review
                </a>
            </td>
        </tr>
        {% endfor %}
    </tbody>
</table>
{% endblock %}