{% extends "base.html" %}
{% block title %}VOX — TtsToy{% endblock %}
{% block content %}
<div style="margin-bottom:1.25rem;">
  <h1 style="font-size:1rem;font-weight:300;color:#e0ecff;text-transform:uppercase;letter-spacing:2px;text-shadow:0 0 16px rgba(80,150,255,0.2);">VOX Announcer</h1>
</div>

<div class="card">
  <h2>About</h2>
  <div style="font-size:0.85rem;color:#b0c8e0;margin-bottom:0.5rem;">Black Mesa / Half-Life VOX announcer. Only words in the dictionary are spoken — unknown words are silently skipped.</div>
  <div class="muted">Current pack: <code>{{ current_pack }}</code> &nbsp;|&nbsp; Available: {{ packs | join(', ') }}</div>
</div>

<div class="card">
  <h2>Available Words ({{ words | length }})</h2>
  <div class="form-group" style="margin-bottom:0.9rem;">
    <input type="text" id="word-filter" placeholder="Filter words..." oninput="filterWords()">
  </div>
  <div id="word-grid" style="display:flex;flex-wrap:wrap;gap:0.35rem;max-height:380px;overflow-y:auto;padding-right:4px;">
    {% for w in words %}
    <span style="background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.10);border-radius:3px;padding:0.15rem 0.45rem;font-size:0.78rem;color:rgba(140,200,255,0.8);" data-word="{{ w }}">{{ w }}</span>
    {% endfor %}
  </div>
</div>
{% endblock %}
{% block scripts %}
<script>
function filterWords() {
  const q = document.getElementById('word-filter').value.toLowerCase();
  document.querySelectorAll('#word-grid [data-word]').forEach(el => {
    el.style.display = el.dataset.word.includes(q) ? '' : 'none';
  });
}
</script>
{% endblock %}