{% extends "base.html" %}
{% block title %}Prononciation · Sabaidee{% endblock %}
{% block content %}
<div class="page-head">
  <div>
    <span class="eyebrow">ອອກສຽງ</span>
    <h1>Prononciation</h1>
    <p>Écoute un exemple, enregistre-toi puis compare le contenu reconnu.</p>
  </div>
</div>

<div class="pron-layout">
  <section class="card">
    <label class="field-label">Mot ou phrase à travailler</label>
    <input id="pronText" class="input large" value="ສະບາຍດີ" placeholder="ສະບາຍດີ">
    <div class="pron-actions">
      <button id="listenBtn" class="btn jade">▶ Écouter</button>
      <button id="recordBtn" class="btn primary">● Enregistrer</button>
    </div>
    <div id="recordState" class="record-state">Micro arrêté</div>
  </section>

  <section class="card">
    <span class="eyebrow">ANALYSE</span>
    <div id="pronResult" class="pron-result empty">
      <div class="big-score">—</div>
      <p>Enregistre une phrase pour obtenir une analyse.</p>
    </div>
    <div class="mini-note">
      <b>Important</b>
      <p>La V1 s'appuie sur la transcription vocale. Le score est donc indicatif et ne mesure pas scientifiquement chaque ton laotien.</p>
    </div>
  </section>
</div>
{% endblock %}
{% block scripts %}
<script src="{{ url_for('static', filename='js/pronunciation.js') }}"></script>
{% endblock %}