{% if designations is undefined %}{% set designations = speaker_designations(request) %}{% endif %}
<tr id="speaker-row-{{ speaker_idx }}">
    <td>
        <strong>{{ speaker.primary_name }}</strong>
        {% set _desig = designations.get(speaker.primary_name) %}
        {% if _desig %}
            {% if _desig.status == 'clear' %}
            <span class="qa-badge-wrap" style="margin-left:0.3rem">
                {% if _desig.reviewed %}
                {# A person approved this speaker. Do not label it auto-accepted -
                   that claim is false here, and it is what made an approved row
                   look like it had simply been dropped from the worklist. #}
                <span class="badge badge-green" style="font-size:0.65rem"
                      title="You approved this speaker — no longer in the needs-check list.{{ '\n' }}Still flagged for:{% if _desig.reasons %}&#10;{% for r in _desig.reasons %}{{ loop.index }}. {{ r }}{% if not loop.last %}&#10;{% endif %}{% endfor %}{% else %} none{% endif %}">✓ reviewed</span>
                {% else %}
                <span class="badge badge-green" style="font-size:0.65rem"
                      title="Identified with {{ '%.0f'|format(_desig.confidence * 100) }}% confidence — auto-accepted">✓ clear</span>
                {% endif %}
            </span>
            {% else %}
            <span class="qa-badge-wrap" style="margin-left:0.3rem">
                <span class="badge badge-red" style="font-size:0.65rem"
                      title="Needs checking ({{ '%.0f'|format(_desig.confidence * 100) }}% confidence){% if _desig.reasons %}&#10;{% for r in _desig.reasons %}{{ loop.index }}. {{ r }}{% if not loop.last %}&#10;{% endif %}{% endfor %}{% endif %}">⚠ needs check</span>
            </span>
            {% endif %}
        {% endif %}
        {% if speaker.flagged %}
        <span class="badge badge-yellow" style="font-size:0.65rem; margin-left:0.3rem" title="Profile is under-specified (no traits, unknown gender)">thin profile</span>
        {% endif %}
        {% if speaker.sample_dialogue %}
        <br><small style="color:#94a3b8; font-style:italic">"{{ speaker.sample_dialogue[:80] }}{% if speaker.sample_dialogue|length > 80 %}...{% endif %}"</small>
        {% endif %}
        {% if speaker.description %}
        <br><small style="color:#64748b">{{ speaker.description[:100] }}{% if speaker.description|length > 100 %}...{% endif %}</small>
        {% endif %}
    </td>
    <td>
        {% for alias in speaker.aliases %}
        <span class="badge badge-blue" style="margin:0.1rem">{{ alias }}
            <button onclick="showAliasModal({{ speaker_idx }}, '{{ alias|e }}')"
                    style="background:none; border:none; color:#94a3b8; cursor:pointer; padding:0 0.2rem; font-size:0.7rem"
                    title="Remove alias">×</button>
        </span>
        {% endfor %}
        <form hx-post="/api/speakers/{{ speaker_idx }}/alias"
              hx-target="#speaker-row-{{ speaker_idx }}"
              hx-swap="outerHTML"
              style="display:inline-flex; gap:0.25rem; margin-top:0.3rem">
            <input type="text" name="alias" placeholder="add alias" required
                   style="width:100px; padding:0.25rem 0.4rem; background:#1a1a2e; border:1px solid #333; border-radius:3px; color:#e0e0e0; font-size:0.8rem">
            <button type="submit" class="btn btn-generate" style="font-size:0.75rem; padding:0.2rem 0.5rem">+</button>
        </form>
    </td>
    <td>
        <small style="display:flex; flex-direction:column">
            <span>{{ speaker.demographics.type if speaker.demographics else 'Unknown' }} / {{ speaker.demographics.gender if speaker.demographics else '??' }}</span>
            {% if speaker.get('accent') and speaker.accent != 'none' %}
            <span style="color:#7c3aed; font-size:0.7rem">{{ speaker.accent }}</span>
            {% endif %}
        </small>
    </td>
    <td>
        {% for trait in speaker.vocal_traits %}
        <span class="badge badge-green" style="margin:0.1rem; font-size:0.75rem">{{ trait }}</span>
        {% endfor %}
        {% for eff in speaker.get('distortion_effects', []) %}
        <span class="badge" style="margin:0.1rem; font-size:0.75rem; background:#92400e; color:#fbbf24">{{ eff }}</span>
        {% endfor %}
    </td>
    <td style="white-space:nowrap">
        {% set ref_name = speaker.primary_name|lower|replace(' ', '_') %}
        {% set ref_file = ref_name ~ '_ref.wav' %}
        <div style="display:flex; gap:0.3rem; align-items:center; flex-wrap:wrap">
            {% if speaker.has_voice_ref %}
            <button class="btn btn-generate" id="play-btn-{{ speaker_idx }}" style="font-size:0.75rem; padding:0.2rem 0.5rem"
                    onclick="toggleSpeakerPlay({{ speaker_idx }}, '{{ ref_file }}')">
                ▶ Play
            </button>
            <audio id="audio-{{ speaker_idx }}" style="display:none" preload="none">
                <source src="/voice-test-audio/{{ ref_file }}" type="audio/wav">
            </audio>
            {% else %}
            <span style="font-size:0.75rem; color:#64748b; font-style:italic">No sample</span>
            {% endif %}
            <div style="width:100%; margin-top:0.25rem">
            {% if speaker.engine_fallback %}
                <span class="badge badge-red" style="font-size:0.7rem"
                      title="Generated with Edge-TTS, not Qwen3-TTS. Reason: {{ speaker.voice_engine_reason }}">⚠ Edge-TTS fallback</span>
                <span style="font-size:0.65rem; color:#f87171; display:block">not the Qwen3 voice — regenerate</span>
            {% elif speaker.voice_engine == 'qwen' and speaker.has_voice_ref %}
                <span class="badge" style="font-size:0.7rem; background:#065f46; color:#6ee7b7">Qwen3-TTS ✓</span>
            {% endif %}
            {% if speaker.voice_status == 'approved' %}
                <span class="badge badge-green" style="font-size:0.7rem">Approved ✓</span>
                <span style="font-size:0.65rem; color:#64748b; display:block">saved to registry</span>
            {% elif speaker.voice_status == 'rejected' %}
                <span class="badge badge-red" style="font-size:0.7rem">Rejected ✗</span>
                <button class="btn btn-generate" style="font-size:0.7rem; padding:0.15rem 0.4rem; margin-top:0.2rem"
                        onclick="regenerateSpeakerVoice('{{ speaker.primary_name|e }}')">
                    ↻ Try Again
                </button>
            {% elif speaker.has_voice_ref %}
                <span class="badge" style="font-size:0.7rem; background:#374151; color:#94a3b8">Pending</span>
            {% else %}
                <button class="btn btn-generate" style="font-size:0.7rem; padding:0.15rem 0.4rem"
                        onclick="generateSingleVoice('{{ speaker.primary_name|e }}', {{ speaker_idx }})">
                    🎙 Generate Voice
                </button>
            {% endif %}
            </div>
        </div>
    </td>
    <td style="white-space:nowrap">
        {% if speaker.is_narrator %}
            <span class="badge badge-blue">Narrator</span>
        {% elif speaker.is_group %}
            <span class="badge badge-yellow">Group</span>
        {% endif %}
        <button class="btn btn-approve" style="font-size:0.75rem; padding:0.2rem 0.5rem"
                onclick="approveSpeakerVoice('{{ speaker.primary_name|e }}', {{ speaker_idx }})">
            ✓ Approve
        </button>
        {# Queue state for this speaker. Rendered empty on load, then filled by
           refreshVoiceQueue(); the id is what the poller updates in place. #}
        <span class="badge voice-queue-tag"
              id="vq-tag-{{ speaker_idx }}"
              data-speaker="{{ speaker.primary_name|e }}"
              style="display:none; font-size:0.7rem"></span>
        <button class="btn btn-generate" style="font-size:0.75rem; padding:0.2rem 0.5rem"
                id="vq-btn-{{ speaker_idx }}"
                onclick="regenerateSpeakerVoice('{{ speaker.primary_name|e }}', {{ speaker_idx }})">
            ↻ Regenerate
        </button>
        <button class="btn btn-reject" style="font-size:0.7rem; padding:0.15rem 0.4rem; display:none"
                id="vq-cancel-{{ speaker_idx }}"
                onclick="cancelVoiceQueue('{{ speaker.primary_name|e }}', {{ speaker_idx }})">
            ✕
        </button>
        <button class="btn btn-generate" style="font-size:0.8rem; padding:0.3rem 0.6rem"
                onclick="toggleEditSpeaker({{ speaker_idx }})">
            Edit
        </button>
          {# Not hx-delete: htmx will not swap a 409, and this has to be
             able to answer "this speaker has 12 utterances - where do they
             go?". The handler also re-renders the whole list, because
             deleting renumbers every speaker after it. #}
          <button class="btn btn-reject" style="font-size:0.8rem; padding:0.3rem 0.6rem"
                  onclick="deleteSpeaker({{ speaker_idx }}, '{{ speaker.primary_name|e }}')">
              Delete
          </button>
          <div id="delete-prompt-{{ speaker_idx }}" style="display:none; margin-top:0.5rem; padding:0.5rem; background:#3f1d1d; border-radius:6px"></div>
        <div id="merge-speaker-{{ speaker_idx }}" style="display:none; margin-top:0.5rem; border-top:1px solid #333; padding-top:0.5rem">
            <div style="display:flex; gap:0.5rem; align-items:center; margin-bottom:0.5rem">
                <label style="color:#94a3b8; font-size:0.8rem">Merge into:</label>
                <select id="merge-target-{{ speaker_idx }}" style="padding:0.3rem; background:#1a1a2e; border:1px solid #333; border-radius:3px; color:#e0e0e0; font-size:0.8rem; flex:1">
                    {% for other in speakers %}
                        {% if other.primary_name != speaker.primary_name %}
                        <option value="{{ loop.index0 }}">{{ other.primary_name }}</option>
                        {% endif %}
                    {% endfor %}
                </select>
                <button type="button" class="btn btn-reject" style="font-size:0.75rem; padding:0.2rem 0.5rem"
                        onclick="mergeSpeaker({{ speaker_idx }})">
                    Merge
                </button>
            </div>
        </div>
        <button class="btn" style="font-size:0.8rem; padding:0.3rem 0.6rem; background:#374151; color:#9ca3af"
                onclick="toggleMergeSpeaker({{ speaker_idx }})">
            Merge
        </button>
        <div id="edit-speaker-{{ speaker_idx }}" style="display:none; margin-top:0.5rem; border-top:1px solid #333; padding-top:0.5rem">
            <form hx-put="/api/speakers/{{ speaker_idx }}"
                  hx-target="#speaker-row-{{ speaker_idx }}"
                  hx-swap="outerHTML"
                  data-regen-on-save="{{ speaker_idx }}">
                {# Re-voice fires after a successful save, never before: the profile must be
                   on disk before the voice is rebuilt from it, and a failed
                   save must queue nothing.

                   Three traps, all hit here already:
                   - Not onsubmit="return fn(...)". Such a handler that falls
                     off the end returns undefined, which is falsy, so the
                     browser cancels the submit and every edit is discarded.
                   - Not hx-on::after-request. htmx dispatches afterRequest on
                     the TBODY for a row swap, not on this form, so a listener
                     bound to the form never fires.
                   - Not detail.elt in a body-level afterRequest handler either:
                     elt is the FORM at beforeRequest but the TBODY at
                     afterRequest. The index is captured at beforeRequest, where
                     the form is still the event target, and matched to the
                     completing request by path. See speakers.html. #}
                <div style="display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:0.5rem; margin-bottom:0.5rem">
                    <input type="text" name="primary_name" value="{{ speaker.primary_name }}" required
                           style="padding:0.4rem; background:#1a1a2e; border:1px solid #333; border-radius:3px; color:#e0e0e0; font-size:0.85rem">
                    <select name="speaker_type" style="padding:0.4rem; background:#1a1a2e; border:1px solid #333; border-radius:3px; color:#e0e0e0; font-size:0.85rem">
                        <option value="Human" {% if speaker.demographics and speaker.demographics.type == 'Human' %}selected{% endif %}>Human</option>
                        <option value="Robot" {% if speaker.demographics and speaker.demographics.type == 'Robot' %}selected{% endif %}>Robot</option>
                        <option value="Computer" {% if speaker.demographics and speaker.demographics.type == 'Computer' %}selected{% endif %}>Computer</option>
                        <option value="AI" {% if speaker.demographics and speaker.demographics.type == 'AI' %}selected{% endif %}>AI</option>
                        <option value="Alien" {% if speaker.demographics and speaker.demographics.type == 'Alien' %}selected{% endif %}>Alien</option>
                        <option value="Unknown" {% if not speaker.demographics or speaker.demographics.type == 'Unknown' %}selected{% endif %}>Unknown</option>
                    </select>
                    <select name="gender" style="padding:0.4rem; background:#1a1a2e; border:1px solid #333; border-radius:3px; color:#e0e0e0; font-size:0.85rem">
                        <option value="Unknown" {% if speaker.demographics and speaker.demographics.gender == 'Unknown' %}selected{% endif %}>Unknown</option>
                        <option value="Male" {% if speaker.demographics and speaker.demographics.gender == 'Male' %}selected{% endif %}>Male</option>
                        <option value="Female" {% if speaker.demographics and speaker.demographics.gender == 'Female' %}selected{% endif %}>Female</option>
                        <option value="Non-binary" {% if speaker.demographics and speaker.demographics.gender == 'Non-binary' %}selected{% endif %}>Non-binary</option>
                    </select>
                    <select name="accent" style="padding:0.4rem; background:#1a1a2e; border:1px solid #333; border-radius:3px; color:#e0e0e0; font-size:0.85rem">
                        <option value="none" {% if speaker.accent == 'none' or not speaker.accent %}selected{% endif %}>None (auto-detect)</option>
                        <option value="american" {% if speaker.accent == 'american' %}selected{% endif %}>American</option>
                        <option value="british" {% if speaker.accent == 'british' %}selected{% endif %}>British</option>
                        <option value="australian" {% if speaker.accent == 'australian' %}selected{% endif %}>Australian</option>
                        <option value="indian" {% if speaker.accent == 'indian' %}selected{% endif %}>Indian</option>
                        <option value="irish" {% if speaker.accent == 'irish' %}selected{% endif %}>Irish</option>
                        <option value="canadian" {% if speaker.accent == 'canadian' %}selected{% endif %}>Canadian</option>
                        <option value="nigerian" {% if speaker.accent == 'nigerian' %}selected{% endif %}>Nigerian</option>
                        <option value="kenyan" {% if speaker.accent == 'kenyan' %}selected{% endif %}>Kenyan</option>
                        <option value="hong_kong" {% if speaker.accent == 'hong_kong' %}selected{% endif %}>Hong Kong</option>
                    </select>
                    <select name="accent_strength" style="padding:0.4rem; background:#1a1a2e; border:1px solid #333; border-radius:3px; color:#e0e0e0; font-size:0.85rem">
                        <option value="light" {% if speaker.accent_strength == 'light' %}selected{% endif %}>Accent: Light</option>
                        <option value="medium" {% if not speaker.accent_strength or speaker.accent_strength == 'medium' %}selected{% endif %}>Accent: Medium</option>
                        <option value="strong" {% if speaker.accent_strength == 'strong' %}selected{% endif %}>Accent: Strong</option>
                    </select>
                </div>
                <div style="display:grid; grid-template-columns:1fr 1fr; gap:0.5rem; margin-bottom:0.5rem">
                    <input type="text" name="vocal_traits" value="{{ speaker.vocal_traits|join(', ') }}"
                           placeholder="raspy, deep, fast-talker"
                           style="padding:0.4rem; background:#1a1a2e; border:1px solid #333; border-radius:3px; color:#e0e0e0; font-size:0.85rem">
                    <select name="communication_register" style="padding:0.4rem; background:#1a1a2e; border:1px solid #333; border-radius:3px; color:#e0e0e0; font-size:0.85rem">
                        <option value="Casual" {% if speaker.communication_style and speaker.communication_style.primary_register == 'Casual' %}selected{% endif %}>Casual</option>
                        <option value="Formal" {% if speaker.communication_style and speaker.communication_style.primary_register == 'Formal' %}selected{% endif %}>Formal</option>
                        <option value="Authoritative" {% if speaker.communication_style and speaker.communication_style.primary_register == 'Authoritative' %}selected{% endif %}>Authoritative</option>
                        <option value="Academic" {% if speaker.communication_style and speaker.communication_style.primary_register == 'Academic' %}selected{% endif %}>Academic</option>
                        <option value="Frantic" {% if speaker.communication_style and speaker.communication_style.primary_register == 'Frantic' %}selected{% endif %}>Frantic</option>
                        <option value="Professional" {% if speaker.communication_style and speaker.communication_style.primary_register == 'Professional' %}selected{% endif %}>Professional</option>
                    </select>
                </div>
                <div style="display:grid; grid-template-columns:1fr 1fr; gap:0.5rem; margin-bottom:0.5rem">
                    <div>
                        <label style="color:#94a3b8; font-size:0.75rem; display:block; margin-bottom:0.2rem">Post-gen effects (applied after TTS)</label>
                        <select name="distortion_effects" multiple size="3"
                                style="width:100%; padding:0.3rem; background:#1a1a2e; border:1px solid #333; border-radius:3px; color:#e0e0e0; font-size:0.8rem">
                            {% set available_effects = ['squawk','polly','bitcrusher','hard_clip','tremolo','random_gating','bandpass','lowpass','highpass','tube_sat','chorus','noise_inject','pitch_jitter','pitch_shift','pitch_shift_pv','vibrato','ring_modulate'] %}
                            {% set current_effects = speaker.get('distortion_effects', []) %}
                            {% for eff in available_effects %}
                            <option value="{{ eff }}" {% if eff in current_effects %}selected{% endif %}>{{ eff }}</option>
                            {% endfor %}
                        </select>
                        <small style="color:#64748b; font-size:0.65rem">Ctrl/Cmd+click to select multiple</small>
                    </div>
                    <div>
                        <label style="color:#94a3b8; font-size:0.75rem; display:block; margin-bottom:0.2rem">Preview with effects</label>
                        <div style="display:flex; gap:0.3rem; align-items:center">
                            <button type="button" class="btn btn-generate" style="font-size:0.75rem; padding:0.2rem 0.5rem"
                                    onclick="previewSpeakerEffects({{ speaker_idx }}, '{{ speaker.primary_name|e }}')">
                                ▶ Preview Effects
                            </button>
                            <audio id="preview-audio-{{ speaker_idx }}" controls style="height:32px; width:160px" preload="none"></audio>
                        </div>
                    </div>
                </div>
                <input type="text" name="style_notes" value="{{ speaker.communication_style.style_shifts_or_notes if speaker.communication_style else '' }}"
                       placeholder="Style shifts/notes"
                       style="width:100%; padding:0.4rem; background:#1a1a2e; border:1px solid #333; border-radius:3px; color:#e0e0e0; font-size:0.85rem; margin-bottom:0.5rem">
                <input type="text" name="description" value="{{ speaker.description }}"
                       style="width:100%; padding:0.4rem; background:#1a1a2e; border:1px solid #333; border-radius:3px; color:#e0e0e0; font-size:0.85rem; margin-bottom:0.5rem">
                <div style="margin-bottom:0.5rem">
                    <label style="color:#94a3b8; font-size:0.75rem">Pinned voice instruct (overrides auto-built description — leave empty to auto-build)</label>
                    <textarea name="voice_description" rows="3"
                              style="width:100%; padding:0.4rem; background:#1a1a2e; border:1px solid #333; border-radius:3px; color:#e0e0e0; font-size:0.85rem; margin-top:0.2rem">{{ speaker.voice_description }}</textarea>
                </div>
                <input type="text" name="sample_dialogue" value="{{ speaker.sample_dialogue }}"
                       style="width:100%; padding:0.4rem; background:#1a1a2e; border:1px solid #333; border-radius:3px; color:#e0e0e0; font-size:0.85rem; margin-bottom:0.5rem">
                <div style="display:grid; grid-template-columns:1fr 1fr; gap:0.5rem; margin-bottom:0.5rem">
                    <select name="age" style="padding:0.4rem; background:#1a1a2e; border:1px solid #333; border-radius:3px; color:#e0e0e0; font-size:0.85rem">
                        {% set current_age = speaker.demographics.age if speaker.demographics and speaker.demographics.age else 'Unknown' %}
                        <option value="Unknown" {% if current_age == 'Unknown' %}selected{% endif %}>Unknown</option>
                        <option value="Child" {% if current_age == 'Child' %}selected{% endif %}>Child</option>
                        <option value="Young" {% if current_age == 'Young' %}selected{% endif %}>Young</option>
                        <option value="Adult" {% if current_age == 'Adult' %}selected{% endif %}>Adult</option>
                        <option value="Middle-aged" {% if current_age == 'Middle-aged' %}selected{% endif %}>Middle-aged</option>
                        <option value="Elderly" {% if current_age == 'Elderly' %}selected{% endif %}>Elderly</option>
                    </select>
                    <select name="pitch" style="padding:0.4rem; background:#1a1a2e; border:1px solid #333; border-radius:3px; color:#e0e0e0; font-size:0.85rem">
                        {% set current_pitch = speaker.demographics.pitch if speaker.demographics and speaker.demographics.pitch else 'mid' %}
                        <option value="very_low" {% if current_pitch|lower == 'very_low' %}selected{% endif %}>Very low</option>
                        <option value="low" {% if current_pitch|lower == 'low' %}selected{% endif %}>Low</option>
                        <option value="mid_low" {% if current_pitch|lower == 'mid_low' %}selected{% endif %}>Mid-low</option>
                        <option value="mid" {% if current_pitch|lower == 'mid' %}selected{% endif %}>Mid</option>
                        <option value="mid_high" {% if current_pitch|lower == 'mid_high' %}selected{% endif %}>Mid-high</option>
                        <option value="high" {% if current_pitch|lower == 'high' %}selected{% endif %}>High</option>
                        <option value="very_high" {% if current_pitch|lower == 'very_high' %}selected{% endif %}>Very high</option>
                        <option value="ultra_high" {% if current_pitch|lower == 'ultra_high' %}selected{% endif %}>Ultra high</option>
                    </select>
                </div>
                <div style="display:flex; gap:0.5rem; align-items:center; margin-bottom:0.5rem">
                    <label style="color:#94a3b8; font-size:0.8rem">
                        <input type="checkbox" name="is_narrator" value="true" {% if speaker.is_narrator %}checked{% endif %}> Narrator
                    </label>
                    <label style="color:#94a3b8; font-size:0.8rem">
                        <input type="checkbox" name="is_group" value="true" {% if speaker.is_group %}checked{% endif %}> Group
                    </label>
                </div>
                <button type="submit" class="btn btn-approve" style="font-size:0.8rem">Save &amp; Re-voice</button>
                <button type="button" class="btn" style="font-size:0.8rem; background:#333;color:#94a3b8" onclick="toggleEditSpeaker({{ speaker_idx }})">Cancel</button>
            </form>
        </div>
    </td>
</tr>