{% extends "base.html" %} {% block title %}Connexion - Bolsa{% endblock %} {%
block content %}
<div class="flex justify-center items-center h-[65vh]">
  <div
    class="bg-gray-900 border border-gray-800 p-8 rounded-xl shadow-2xl w-full max-w-md"
  >
    <h2 class="text-2xl font-semibold text-center mb-6 text-white">
      Connexion
    </h2>

    <!-- Messages flash d'erreur -->
    {% with messages = get_flashed_messages() %} {% if messages %}
    <div
      class="mb-4 p-3 bg-red-950 border border-red-800 text-red-300 text-sm rounded text-center"
    >
      {% for message in messages %} {{ message }} {% endfor %}
    </div>
    {% endif %} {% endwith %}

    <form method="POST" action="{{ url_for('main.index') }}" class="space-y-4">
      <div>
        <label for="login" class="block text-sm font-medium text-gray-300 mb-1"
          >Login :</label
        >
        <input
          type="text"
          id="login"
          name="login"
          required
          autocomplete="username"
          class="w-full px-4 py-2 bg-gray-950 border border-gray-700 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-blue-600"
        />
      </div>

      <div>
        <label for="pass" class="block text-sm font-medium text-gray-300 mb-1"
          >Mot de passe :</label
        >
        <input
          type="password"
          id="pass"
          name="pass"
          required
          autocomplete="current-password"
          class="w-full px-4 py-2 bg-gray-950 border border-gray-700 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-blue-600"
        />
      </div>

      <button
        type="submit"
        class="w-full mt-2 py-2.5 px-4 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition duration-200 cursor-pointer"
      >
        Valider
      </button>
    </form>
  </div>
</div>
{% endblock %}