{% extends "base.html" %}
{% block title %}Démarrer l'évaluation{% endblock %}
{% block body %}
<div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-800 to-blue-900 p-4">
  <div class="bg-white rounded-2xl shadow-2xl w-full max-w-lg overflow-hidden">

    <div class="bg-gradient-to-r from-blue-700 to-blue-900 px-8 py-8 text-white text-center">
      <div class="text-4xl mb-2">📝</div>
      <h1 class="text-2xl font-bold">Évaluation SI-ERP</h1>
      <p class="text-blue-200 text-sm mt-1">ESITH – Séminaire Systèmes d'Information 2025</p>
    </div>

    <div class="px-8 py-8">
      <!-- Info cards -->
      <div class="grid grid-cols-2 gap-4 mb-6">
        <div class="bg-blue-50 rounded-xl p-4 text-center">
          <div class="text-2xl font-bold text-blue-700">{{ duration }}</div>
          <div class="text-xs text-blue-600 mt-1">minutes au total</div>
        </div>
        <div class="bg-green-50 rounded-xl p-4 text-center">
          <div class="text-2xl font-bold text-green-700">20</div>
          <div class="text-xs text-green-600 mt-1">points au total</div>
        </div>
        <div class="bg-purple-50 rounded-xl p-4 text-center">
          <div class="text-2xl font-bold text-purple-700">15</div>
          <div class="text-xs text-purple-600 mt-1">questions QCM</div>
        </div>
        <div class="bg-amber-50 rounded-xl p-4 text-center">
          <div class="text-2xl font-bold text-amber-700">3</div>
          <div class="text-xs text-amber-600 mt-1">cas pratiques</div>
        </div>
      </div>

      <!-- Structure -->
      <div class="bg-slate-50 rounded-xl p-5 mb-6 text-sm">
        <h3 class="font-semibold text-slate-700 mb-3">📋 Structure de l'évaluation</h3>
        <div class="space-y-2">
          <div class="flex items-center justify-between">
            <span class="text-slate-600">QCM (définitions &amp; concepts)</span>
            <span class="font-semibold text-blue-700">60% → 12 pts</span>
          </div>
          <div class="w-full bg-slate-200 rounded-full h-1.5">
            <div class="bg-blue-500 h-1.5 rounded-full" style="width:60%"></div>
          </div>
          <div class="flex items-center justify-between mt-2">
            <span class="text-slate-600">Cas pratiques (compréhension)</span>
            <span class="font-semibold text-amber-700">40% → 8 pts</span>
          </div>
          <div class="w-full bg-slate-200 rounded-full h-1.5">
            <div class="bg-amber-500 h-1.5 rounded-full" style="width:40%"></div>
          </div>
        </div>
      </div>

      <!-- Rules -->
      <div class="bg-red-50 border border-red-200 rounded-xl p-4 mb-6 text-sm">
        <h3 class="font-semibold text-red-700 mb-2">⚠️ Règles importantes</h3>
        <ul class="text-red-600 space-y-1 text-xs">
          <li>• Le chronomètre démarre dès que vous cliquez sur «Commencer»</li>
          <li>• L'évaluation se soumet automatiquement à la fin du temps</li>
          <li>• Vos réponses sont sauvegardées automatiquement</li>
          <li>• L'utilisation de ressources externes est interdite</li>
          <li>• Chaque étudiant a un jeu de questions unique</li>
        </ul>
      </div>

      <form method="post" action="{{ root_path }}/assessment/start" onsubmit="return confirmStart()">
        <button type="submit" id="start-btn"
          class="w-full bg-blue-700 hover:bg-blue-800 text-white font-bold py-4 rounded-xl transition-colors text-base tracking-wide">
          🚀 Démarrer l'évaluation
        </button>
      </form>

      <div class="mt-4 text-center">
        <a href="{{ root_path }}/logout" class="text-xs text-slate-400 hover:text-slate-600">Se déconnecter</a>
      </div>
    </div>
  </div>
</div>

<script>
function confirmStart() {
  return confirm('Êtes-vous prêt(e) ? Le chronomètre de {{ duration }} minutes démarrera immédiatement.');
}
</script>
{% endblock %}