{% extends "base.html" %}
{% block content %}

<div class="card">
    <h2 style="margin:0">Library</h2>
    <p style="color:#94a3b8; margin:0.25rem 0 0">
        Reusable voices, proper-name pronunciations, and captured utterances shared across projects.
    </p>
</div>

<div style="display:flex; gap:0.5rem; margin-bottom:1rem; flex-wrap:wrap">
    <button class="btn" style="border:1px solid #7c3aed; color:#7c3aed" onclick="setLibTab('speakers', this)">Speakers</button>
    <button class="btn" style="border:1px solid #7c3aed; color:#7c3aed" onclick="setLibTab('names', this)">Names</button>
    <button class="btn" style="border:1px solid #7c3aed; color:#7c3aed" onclick="setLibTab('utterances', this)">Utterances</button>
</div>

<div id="lib-content">
    <div id="lib-tab" hx-get="/library/speakers" hx-trigger="load" hx-swap="innerHTML">
        <p>Loading...</p>
    </div>
</div>

<script>
function setLibTab(tab, btn) {
    document.querySelectorAll('#lib-content .lib-tab-swap').forEach(function() {});
    var el = document.getElementById('lib-tab');
    var urls = {speakers: '/library/speakers', names: '/library/names', utterances: '/library/utterances'};
    el.setAttribute('hx-get', urls[tab]);
    htmx.process(el);
    htmx.ajax('GET', urls[tab], {target: '#lib-tab', swap: 'innerHTML'});
    document.querySelectorAll('button').forEach(function(b) { b.style.background = ''; });
    if (btn) { btn.style.background = '#7c3aed'; btn.style.color = '#fff'; }
}
</script>

{% endblock %}