{% extends "base.html" %}
{% set active = "transcriptions" %}
{% block title %}Transcriptions — Communication DNA{% endblock %}
{% block content %}
<h2 class="text-2xl font-bold mb-6">Transcriptions</h2>
{% if transcriptions %}
<div class="overflow-x-auto">
    <table class="w-full text-sm">
        <thead class="text-gray-400 border-b border-gray-700">
            <tr>
                <th class="text-left py-3 px-2">Title</th>
                <th class="text-left py-3 px-2">Date</th>
                <th class="text-left py-3 px-2">Context</th>
                <th class="text-left py-3 px-2">Speakers</th>
                <th class="text-right py-3 px-2">Words</th>
                <th class="text-center py-3 px-2">Sentiment</th>
            </tr>
        </thead>
        <tbody>
            {% for t in transcriptions %}
            <tr class="border-b border-gray-800 hover:bg-gray-800">
                <td class="py-3 px-2"><a href="/transcription/{{ t.id }}" class="text-blue-400 hover:underline">{{ t.title or 'Untitled' }}</a></td>
                <td class="py-3 px-2 text-gray-400">{{ t.date or '—' }}</td>
                <td class="py-3 px-2 text-gray-400">{{ t.context or '—' }}</td>
                <td class="py-3 px-2 text-gray-400">{{ t.speakers|join(', ') }}</td>
                <td class="py-3 px-2 text-right">{{ "{:,}".format(t.word_count or 0) }}</td>
                <td class="py-3 px-2 text-center">{{ sentiment_emoji(t.sentiment_avg) }} {{ "%.2f"|format(t.sentiment_avg) }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% else %}
<p class="text-gray-500">No transcriptions yet. <a href="/ingest" class="text-blue-400 hover:underline">Ingest one!</a></p>
{% endif %}
{% endblock %}