{% extends "base.html" %}
{% block title %}Écriture lao · Sabaidee{% endblock %}
{% block content %}
<div class="page-head">
  <div>
    <span class="eyebrow">ຕົວອັກສອນ</span>
    <h1>Écriture lao</h1>
    <p>Choisis un mot en lao, masque le modèle, puis entraîne-toi à le tracer au doigt ou à la souris.</p>
  </div>
</div>

<div class="character-layout">
  <section class="card character-picker">
    <input id="charSearch" class="input" placeholder="Chercher…">
    <div id="charList" class="char-list">
      {% for c in chars %}
      <button class="char-item" data-hanzi="{{ c.hanzi }}" data-pinyin="{{ c.pinyin }}" data-meaning="{{ c.meaning_fr }}">
        <b>{{ c.hanzi }}</b><span>{{ c.pinyin }}</span>
      </button>
      {% endfor %}
    </div>
  </section>

  <section class="card draw-card">
    <div class="character-model">
      <span id="modelChar">ຂ້ອຍ</span>
      <div><b id="modelPinyin">khoy</b><small id="modelMeaning">je / moi</small></div>
    </div>

    <div class="canvas-wrap">
      <canvas id="drawCanvas" width="600" height="600"></canvas>
      <div id="ghostChar" class="ghost-char">ຂ້ອຍ</div>
      <div class="guide v"></div><div class="guide h"></div>
      <div class="guide d1"></div><div class="guide d2"></div>
    </div>

    <div class="canvas-actions">
      <button id="clearCanvas" class="btn ghost">Effacer</button>
      <button id="toggleGhost" class="btn ghost">Masquer le modèle</button>
    </div>

    <div class="self-grade">
      <span>Ton tracé :</span>
      <button data-score="1">À refaire</button>
      <button data-score="2">Correct</button>
      <button data-score="3">Très bien</button>
    </div>
    <p class="tiny muted">V1 : auto-évaluation du tracé. La reconnaissance précise des lettres peut être ajoutée plus tard.</p>
  </section>
</div>
{% endblock %}
{% block scripts %}
<script src="{{ url_for('static', filename='js/characters.js') }}"></script>
{% endblock %}