{% include 'header.html' %}

<body>
<header>
    <nav class="container">
        <ul>
            <li><a href="/">Chatbot</a></li>
            <li>TTS</li>
            {% include 'le_funny_dropdown.html' %}
        </ul>
        {% include 'logout.html' %}
    </nav>
</header>

<main class="container">
    <section>
        <form>
            <label for="textInput">Enter text:</label>
            <input type="text" id="textInput" placeholder="Hi huesoporro">
            <button id="sendButton" type="button">Send text</button>
            <button id="genPermalinkButton" type="button" style="background-color: #9c36b5; border-color: #9c36b5">
                Generate OBS Link
            </button>
        </form>
    </section>
    <audio id="audioPlayer" hidden="hidden" controls></audio>
    <details>
        <summary>Log</summary>
        <div><samp id="log"></samp></div>
    </details>
</main>
<script>
    document.addEventListener('DOMContentLoaded', () => {
        const logElement = document.getElementById('log');
        const eventSource = new EventSource('/api/v1/sse/tts');
        eventSource.onmessage = (event) => {
            logElement.innerHTML += event.data + '<br>';
        };
    })
</script>
</body>
</html>
