{% extends "base.html" %}
{% block content %}
<div class="card">
    <h2>Voice Test Samples</h2>
    <p style="color:#94a3b8">Review and approve voice samples for each speaker. Each sample reads the Rainbow Passage - a phonetically balanced text covering all English phonemes.</p>
    <p style="color:#64748b; font-size:0.9rem; margin-top:0.5rem">Total: {{ total_count }} speakers</p>
</div>
<div id="voice-tests-list"
     hx-get="/voice-tests/partial"
     hx-trigger="load"
     hx-swap="innerHTML">
    <p>Loading voice samples...</p>
</div>

<script>
function playSample(filename) {
    const audio = new Audio('/voice-test-audio/' + filename);
    audio.play();
}
function playAll() {
    const samples = document.querySelectorAll('.voice-sample');
    let delay = 0;
    samples.forEach((sample) => {
        const filename = sample.dataset.filename;
        setTimeout(() => {
            playSample(filename);
        }, delay);
        delay += 3000; // 3 second gap between samples
    });
}
</script>
{% endblock %}