<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8" />
    <title>Chat IA Offline</title>
    <link rel="stylesheet" th:href="@{/css/styles.css}" />
</head>
<body>
<div class="layout-container">

    <!-- Menú lateral izquierdo -->
    <aside id="sidebar">
        <h2>🗂️ Chats</h2>
        <button id="new-chat-btn">➕ Nuevo chat</button>
        <ul id="chat-list">
            <li th:each="chat : ${chats}"
                th:text="${chat.name}"
                th:attr="data-chat-id=${chat.id}"
                th:data-chat-id="${chat.id}">
            </li>
        </ul>
    </aside>

    <!-- Área principal del chat -->
    <main id="main-content">
        <h1>🤖 Chat IA Offline</h1>

        <div id="chat-log">
            <div th:each="msg : ${messages}"
                 th:if="${msg.text != ''}"
                 th:class="'bubble ' + ${msg.role}">
                <span th:text="${msg.text}"></span>
                <em class="timestamp" th:text="${#dates.format(msg.date, 'dd/MM/yyyy HH:mm')}"></em>
            </div>
        </div>
        <div id="spinner"></div>
        <div id="thinking-text">Pensando...</div>

        <form id="chat-form">
            <textarea aria-label="Pregunta del usuario" id="prompt" name="prompt" placeholder="Escribe tu mensaje..." autocomplete="off" required></textarea>
            <button id="send-btn" type="submit">Enviar</button>
        </form>
    </main>

</div>

<script th:src="@{/js/main.js}"></script>
</body>
</html>