{% extends "base.html" %}
{% block title %}Consultation des retours{% endblock %}
{% block content %}
<section class="panel">
  <h2>Consultation</h2>
  <div class="info-box">
    Liste dynamique des retours. Mise à jour périodique. Tu peux changer le statut ou supprimer une entrée.
  </div>
  <form id="filters" class="filters">
    <select name="type">
      <option value="">Type</option>
      <option value="remarque">Remarque</option>
      <option value="suggestion">Suggestion</option>
      <option value="reclamation">Réclamation</option>
    </select>
    <select name="theme">
      <option value="">Thème</option>
      <option value="pedagogie">Pédagogie</option>
      <option value="evaluation">Évaluations</option>
      <option value="vie-scolaire">Vie scolaire</option>
      <option value="infrastructures">Infrastructures</option>
      <option value="restauration">Restauration</option>
      <option value="sante-securite">Santé & Sécurité</option>
      <option value="numerique">Numérique</option>
      <option value="communication">Communication</option>
      <option value="autre">Autre</option>
    </select>
    <select name="urgence">
      <option value="">Urgence</option>
      <option value="faible">Faible</option>
      <option value="modere">Modéré</option>
      <option value="important">Important</option>
      <option value="critique">Critique</option>
    </select>
    <select name="statut">
      <option value="">Statut</option>
      <option value="recu">Reçu</option>
      <option value="encours">En cours</option>
      <option value="resolu">Résolu</option>
      <option value="archive">Archivé</option>
    </select>
    <input type="search" name="q" placeholder="Recherche...">
    <button type="button" id="btn-refresh" class="outline">Rafraîchir</button>
  </form>

  <div class="table-wrap">
    <table class="data">
      <thead>
        <tr>
          <th>ID</th><th>Date</th><th>Type</th><th>Thème</th><th>Titre</th><th>Urgence</th><th>Statut</th><th>Anonyme</th><th>Actions</th>
        </tr>
      </thead>
      <tbody id="tbody-retours">
        <tr><td colspan="9" class="center muted">Chargement...</td></tr>
      </tbody>
    </table>
  </div>
  <div class="footer-bar">
    <span id="total-span" class="badge">0</span>
    <span id="auto-refresh-indicator" class="muted" style="margin-left:.8rem;">Auto-refresh ON (15s)</span>
    <button type="button" id="toggle-auto" class="small outline">Toggle Auto</button>
  </div>
  <div id="consult-feedback" class="feedback hidden"></div>
</section>
{% endblock %}
{% block scripts %}
<script src="{{ url_for('static', filename='js/consult.js') }}"></script>
{% endblock %}