{% extends "base.html" %}
{% block title %}Conversation · Sabaidee{% endblock %}
{% block content %}
<div class="page-head">
  <div>
    <span class="eyebrow">ສົນທະນາ</span>
    <h1>Conversation</h1>
    <p>Plusieurs conversations séparées, comme dans un vrai historique de chat.</p>
  </div>
</div>

<div class="chat-layout multi-chat">
  <aside class="conversation-sidebar card">
    <button id="newConversation" class="btn primary full">＋ Nouvelle conversation</button>
    <div class="conversation-list">
      {% for c in conversations %}
      <a class="conversation-item {{ 'active' if c.id == active_conversation.id else '' }}"
         href="{{ url_for('chat_page', c=c.id) }}" data-id="{{ c.id }}">
        <span>ລ</span>
        <div><b>{{ c.title }}</b><small>{{ c.updated_at[:10] }}</small></div>
        <div class="conversation-actions">
          <button class="rename-conversation" data-id="{{ c.id }}" data-title="{{ c.title|e }}" title="Renommer">✎</button>
          <button class="delete-conversation" data-id="{{ c.id }}" title="Supprimer">×</button>
        </div>
      </a>
      {% endfor %}
    </div>
  </aside>

  <section class="chat-card">
    <div class="chat-current-title">
      <b>{{ active_conversation.title }}</b>
      <button id="clearChat" class="btn ghost">Effacer les messages</button>
    </div>
    <div id="messages" class="messages">
      {% if not messages %}
      <div class="welcome-message">
        <div class="seal">ລ</div>
        <h3>Commence en laotien.</h3>
        <p>Ton niveau est évalué à partir de ce que tu démontres réellement.</p>
      </div>
      {% endif %}
      {% for m in messages %}
      <div class="bubble {{ m.role }}">
        <span>{{ 'ຂ້ອຍ' if m.role == 'user' else 'ລ' }}</span>
        <div>{{ m.content }}</div>
      </div>
      {% endfor %}
    </div>
    <form id="chatForm" class="composer" data-conversation-id="{{ active_conversation.id }}">
      <textarea id="messageInput" rows="2" placeholder="Écris en laotien, transcription ou français…"></textarea>
      <button class="send-btn" type="submit">Envoyer</button>
    </form>
  </section>

  <aside class="chat-settings card">
    <span class="eyebrow">ຮູບແບບ</span>
    <h3>Mode de travail</h3>
    <label class="setting-line">
      <span><b>Laotien informel</b><small>Conversation quotidienne</small></span>
      <input id="modeToggle" type="checkbox" {{ 'checked' if settings.mode == 'informal' else '' }}>
    </label>
    <label class="setting-line">
      <span><b>Correction automatique</b><small>Explique mes erreurs en français</small></span>
      <input id="correctionToggle" type="checkbox" {{ 'checked' if settings.correction_mode else '' }}>
    </label>
    <label class="setting-line">
      <span><b>Vocabulaire connu</b><small>Limiter l'IA à mes mots</small></span>
      <input id="knownToggle" type="checkbox" {{ 'checked' if settings.known_only else '' }}>
    </label>
    <div class="mini-note"><b>Progression adaptative</b><p>Si tu montres régulièrement un niveau supérieur, l'app peut te faire franchir les premiers paliers beaucoup plus vite.</p></div>
  </aside>
</div>
{% endblock %}
{% block scripts %}
<script src="{{ url_for('static', filename='js/chat.js') }}"></script>
{% endblock %}