{% extends "base.html" %}
{% block title %}Connexion – Évaluation SI-ERP{% 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-md overflow-hidden">

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

    <!-- Form -->
    <div class="px-8 py-8">
      {% if error %}
      <div class="mb-5 bg-red-50 border border-red-200 text-red-700 rounded-lg px-4 py-3 text-sm flex items-center gap-2">
        <span>⚠️</span> {{ error }}
      </div>
      {% endif %}

      <form method="post" action="{{ root_path }}/login" autocomplete="off" spellcheck="false">
        <div class="mb-5">
          <label class="block text-sm font-medium text-slate-700 mb-1">Adresse email</label>
          <input type="email" name="email" required autofocus
            class="w-full border border-slate-300 rounded-lg px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
            placeholder="prenom.nom@esith.ac.ma" />
        </div>

        <div class="mb-6">
          <label class="block text-sm font-medium text-slate-700 mb-1">Mot de passe</label>
          <input type="password" name="password" required
            class="w-full border border-slate-300 rounded-lg px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
            placeholder="••••••••" />
        </div>

        <button type="submit"
          class="w-full bg-blue-700 hover:bg-blue-800 text-white font-semibold py-3 rounded-lg transition-colors text-sm tracking-wide">
          Se connecter →
        </button>
      </form>

      <div class="mt-6 text-center text-xs text-slate-400">
        <p>Utilisez les identifiants reçus par email.<br>
        Pour toute assistance, contactez votre instructeur.</p>
      </div>
    </div>

    <!-- Footer -->
    <div class="bg-slate-50 border-t border-slate-100 px-8 py-4 text-center">
      <div class="flex justify-center gap-4 text-xs text-slate-500">
        <span>⏱ Durée : 55 minutes</span>
        <span>📊 Note : /20</span>
        <span>🔒 Évaluation sécurisée</span>
      </div>
    </div>
  </div>
</div>
{% endblock %}