{% extends "base.html" %}
{% block title %}Vocabulaire · Sabaidee{% endblock %}
{% block content %}
<div class="page-head" id="learn">
  <div>
    <span class="eyebrow">ຄຳສັບ</span>
    <h1>Vocabulaire</h1>
    <p>Chaque mot possède son propre score de maîtrise. Clique sur 🔊 pour écouter la prononciation.</p>
  </div>
</div>

<section class="card learn-panel">
  <div>
    <span class="eyebrow">ຄຳສັບໃໝ່</span>
    <h2>Augmenter mon vocabulaire</h2>
  </div>
  <div class="learn-controls">
    <input id="theme" class="input" value="conversation quotidienne" placeholder="Thème : voyage, restaurant, amis…">
    <select id="count" class="input">
      <option value="5">5 mots</option>
      <option value="10">10 mots</option>
      <option value="15">15 mots</option>
    </select>
    <button id="generateWords" class="btn primary">Créer mon pack</button>
  </div>
  <div id="generatedWords" class="generated-grid"></div>
</section>

<section class="card">
  <div class="toolbar">
    <input id="search" class="input" placeholder="Rechercher un mot…">
    <select id="statusFilter" class="input">
      <option value="">Tous les niveaux</option>
      <option value="new">Nouveau</option>
      <option value="learning">En apprentissage</option>
      <option value="known">Connu</option>
      <option value="mastered">Maîtrisé</option>
    </select>
  </div>
  <div id="vocabTable" class="vocab-table"></div>
</section>
{% endblock %}
{% block scripts %}
<script src="{{ url_for('static', filename='js/vocabulary.js') }}"></script>
{% endblock %}