{% extends "base.html" %}
{% block title %}Soumettre un retour{% endblock %}
{% block content %}
<section class="panel">
  <h2>Soumettre un retour</h2>
  <div class="info-box">
    Les champs marqués * sont obligatoires. Les données sont persistées côté serveur dans retours.json.
  </div>
  <form id="form-retour" novalidate>
    <div class="grid-2">
      <div>
        <label>Type *</label>
        <select name="type" required>
          <option value="">--</option>
          <option value="remarque">Remarque</option>
          <option value="suggestion">Suggestion</option>
          <option value="reclamation">Réclamation</option>
        </select>
      </div>
      <div>
        <label>Thème *</label>
        <select name="theme" required>
          <option value="">--</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>
      </div>
    </div>
    <label>Titre *</label>
    <input type="text" name="titre" maxlength="120" required>
    <label>Message (≥ 10 caractères) *</label>
    <textarea name="message" maxlength="3000" required></textarea>

    <details class="optional">
      <summary>Champs facultatifs (impact, proposition)</summary>
      <label>Impact</label>
      <textarea name="impact" maxlength="1000"></textarea>
      <label>Proposition</label>
      <textarea name="proposition" maxlength="1000"></textarea>
    </details>

    <div class="grid-2">
      <div>
        <label>Urgence *</label>
        <select name="urgence" required>
          <option value="">--</option>
          <option value="faible">Faible</option>
          <option value="modere">Modéré</option>
          <option value="important">Important</option>
          <option value="critique">Critique</option>
        </select>
      </div>
      <div>
        <label>Confidentialité *</label>
        <select name="confidentialite" required>
          <option value="">--</option>
          <option value="restreint">Restreint</option>
          <option value="interne">Interne</option>
          <option value="anonyme-synthese">Synthèse anonymisée</option>
        </select>
      </div>
    </div>

    <div class="inline-checks">
      <label><input type="checkbox" name="anonymat" id="chk-anonymat"> Anonyme</label>
      <label><input type="checkbox" name="veracite" required> Exactitude *</label>
      <label><input type="checkbox" name="rgpd" required> Traitement *</label>
    </div>

    <div id="identite-block">
      <div class="grid-3">
        <div>
          <label>Prénom *</label>
          <input type="text" name="prenom">
        </div>
        <div>
          <label>Nom *</label>
          <input type="text" name="nom">
        </div>
        <div>
          <label>Classe *</label>
          <input type="text" name="classe">
        </div>
      </div>
      <label>Email (optionnel)</label>
      <input type="email" name="email" placeholder="ex: moi@example.org">
    </div>

    <div class="actions">
      <button type="submit">Enregistrer</button>
      <button type="reset" class="secondary">Reset</button>
    </div>
    <div id="form-feedback" class="feedback hidden"></div>
  </form>
</section>
{% endblock %}
{% block scripts %}
<script src="{{ url_for('static', filename='js/submit.js') }}"></script>
{% endblock %}