{% extends "base.html" %}
{% block title %}MiniMax — 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);">MiniMax</h1>
</div>

<div class="card">
  <h2>About</h2>
  <div style="font-size:0.85rem;color:#b0c8e0;margin-bottom:0.5rem;">MiniMax is a cloud TTS API with natural-sounding voices. Requires an API key set by the bot owner.</div>
  <div class="muted">Current model: <code>{{ gcfg.get('minimax_model', 'speech-01-turbo') }}</code></div>
</div>

<div class="card">
  <h2>Available Voices</h2>
  <div class="muted" style="margin-bottom:0.9rem;">Click a voice to set it as your personal voice.</div>
  <table>
    <thead><tr><th>Name</th><th>Voice ID</th><th></th></tr></thead>
    <tbody>
    {% for name, vid in voices.items() %}
    <tr>
      <td style="color:#c8daf0;font-weight:300;">{{ name }}</td>
      <td><code>{{ vid }}</code></td>
      <td><button class="btn btn-secondary btn-sm" onclick="setVoice('{{ vid }}','{{ name }}')">Use</button></td>
    </tr>
    {% endfor %}
    </tbody>
  </table>
  <div id="voice-status" class="muted" style="margin-top:0.75rem;"></div>
</div>

<div class="card">
  <h2>Models</h2>
  <table>
    <thead><tr><th>Model</th><th>Description</th></tr></thead>
    <tbody>
      {% for m, desc in [("speech-01-turbo","Fast and cheap"),("speech-01-hd","Higher quality, slower"),("speech-02-turbo","Newer fast model"),("speech-02-hd","Newer high quality model")] %}
      <tr><td><code>{{ m }}</code></td><td>{{ desc }}</td></tr>
      {% endfor %}
    </tbody>
  </table>
  <div class="muted" style="margin-top:0.75rem;">Model can only be changed by the bot owner via <code>[p]ttstoy model</code>.</div>
</div>
{% endblock %}
{% block scripts %}
<script>
async function setVoice(vid, name) {
  const r = await apiFetch('/api/settings/voice', {method:'POST', body: JSON.stringify({voice: vid})});
  const d = await r.json();
  document.getElementById('voice-status').textContent = d.ok ? 'Voice set to ' + name + '.' : 'Error: ' + d.error;
}
</script>
{% endblock %}