{% load static %}
{% load i18n %}
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{ GLOBAL_APPNAME|default:"Cavaliba" }} — Sign in</title>
  <link rel="stylesheet" href="{% static 'tw4/tailwind4.css' %}">
  <link rel="stylesheet" href="{% static 'tw4/fontawesome-7.2.0/css/all.min.css' %}">
</head>

<body class="min-h-screen flex font-sans bg-gray-100">

  <!-- Left panel: sign-in form -->
  <div class="flex flex-col justify-center items-center w-full md:w-1/2 px-8 py-12 bg-white">

    <div class="w-full max-w-sm">

      <!-- Logo + title -->
      <div class="flex flex-col items-center mb-10">
        <img src="{% static 'logo.png' %}" alt="logo" class="w-12 h-12 mb-4">
        <h1 class="text-2xl font-extrabold text-gray-900 tracking-tight">
          {{ GLOBAL_APPNAME|default:"Cavaliba" }}
        </h1>
        <p class="text-sm text-gray-500 mt-1">{% translate "Sign in to your account" %}</p>
      </div>

      <!-- Error messages -->
      {% if form.errors %}
        <div class="mb-6 rounded-lg bg-red-50 border border-red-200 px-4 py-3 text-sm text-red-700">
          {% translate "Invalid username or password. Please try again." %}
        </div>
      {% endif %}

      {% if next and user.is_authenticated %}
        <div class="mb-6 rounded-lg bg-amber-50 border border-amber-200 px-4 py-3 text-sm text-amber-700">
          {% translate "Your account doesn't have access to this page." %}
        </div>
      {% endif %}

      <!-- Form -->
      <form method="post" action="{% url 'login' %}" class="space-y-5">
        {% csrf_token %}
        <input type="hidden" name="next" value="{{ next }}">

        <div>
          <label for="id_username" class="block text-sm font-medium text-gray-700 mb-1.5">
            {% translate "Login" %}
          </label>
          <input
            type="text"
            name="username"
            id="id_username"
            autofocus
            autocapitalize="none"
            autocomplete="username"
            maxlength="150"
            required
            class="w-full border border-gray-300 rounded-lg px-4 py-2.5 text-sm text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition"
          >
        </div>

        <div>
          <label for="id_password" class="block text-sm font-medium text-gray-700 mb-1.5">
            {% translate "Password" %}
          </label>
          <input
            type="password"
            name="password"
            id="id_password"
            autocomplete="current-password"
            required
            class="w-full border border-gray-300 rounded-lg px-4 py-2.5 text-sm text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition"
          >
        </div>

        <button
          type="submit"
          class="w-full bg-indigo-600 text-white font-semibold py-2.5 rounded-lg hover:bg-indigo-700 active:scale-95 transition text-sm mt-2"
        >
          {% translate "Sign in" %}
        </button>




      </form>

      <!-- Footer -->
      <p class="text-center text-xs text-gray-400 mt-10">&copy; cavaliba.com</p>

    </div>
  </div>

  <!-- Right panel: photo -->
  <div class="hidden md:block md:w-1/2 relative">
    <img
      src="{% static 'queyras2.jpg' %}"
      alt="Queyras"
      class="absolute inset-0 w-full h-full object-cover"
    >
    <div class="absolute inset-0 bg-indigo-900/30"></div>
  </div>

          


</body>
</html>
