{% 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" }} — {% translate "Password changed" %}</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 -->
  <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 text-center">

      <img src="{% static 'logo.png' %}" alt="logo" class="w-12 h-12 mx-auto mb-4">
      <h1 class="text-2xl font-extrabold text-gray-900 tracking-tight mb-2">
        {{ GLOBAL_APPNAME|default:"Cavaliba" }}
      </h1>

      <div class="mt-8 rounded-lg bg-green-50 border border-green-200 px-6 py-5 text-green-800">
        <i class="fa-solid fa-circle-check text-green-500 text-3xl mb-3"></i>
        <p class="font-semibold text-base">{% translate "Password changed successfully." %}</p>
        <p class="text-sm text-green-700 mt-1">{% translate "Your new password is now active." %}</p>
      </div>

      <a
        href="{% url 'login' %}"
        class="inline-block mt-8 w-full bg-indigo-600 text-white font-semibold py-2.5 rounded-lg hover:bg-indigo-700 active:scale-95 transition text-sm"
      >
        {% translate "Back to sign in" %}
      </a>

      <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 'tw4/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>
