{% extends "base.html" %}
{% from "macros/ui.html" import flash_messages %}

{% set title = 'Admin Login' %}

{% block body_class %}bg-gray-900 text-gray-100 min-h-screen flex items-center justify-center{% endblock %}

{% block body %}
<div class="w-full max-w-sm p-6 bg-gray-800 rounded-2xl shadow-lg">
  <h2 class="text-2xl font-bold mb-6 text-center text-white">Admin Login</h2>

  {{ flash_messages() }}

  <form method="POST" novalidate>
    {{ form.hidden_tag() }}

    {# Username #}
    <div class="mb-4">
      <label for="user_name" class="block text-sm font-medium mb-1 text-gray-200">
        {{ form.user_name.label.text }}
      </label>
      {{ form.user_name(class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-blue-500") }}
      {% for error in form.user_name.errors %}
        <p class="text-red-400 text-sm mt-1">{{ error }}</p>
      {% endfor %}
    </div>

    {# Password with visibility toggle #}
    <div class="mb-6">
      <label for="password" class="block text-sm font-medium mb-1 text-gray-200">
        {{ form.password.label.text }}
      </label>
      <div class="relative">
        {{ form.password(
            class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-blue-500",
            id="password"
        ) }}
        <button type="button"
                onclick="togglePassword()"
                class="absolute inset-y-0 right-0 px-3 flex items-center text-gray-400 hover:text-white"
                tabindex="-1"
                aria-label="Toggle password visibility">
          <svg id="eyeIcon" xmlns="http://www.w3.org/2000/svg" fill="none"
               viewBox="0 0 24 24" stroke="currentColor" class="w-5 h-5">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
          </svg>
        </button>
      </div>
      {% for error in form.password.errors %}
        <p class="text-red-400 text-sm mt-1">{{ error }}</p>
      {% endfor %}
    </div>

    <button type="submit"
            class="w-full py-2 px-4 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg shadow-md transition duration-300">
      Log In
    </button>
  </form>
</div>
{% endblock %}

{% block scripts %}{% endblock %}{# No Flowbite needed #}

{% block scripts_extra %}
<script>
  function togglePassword() {
    const input = document.getElementById("password");
    const icon  = document.getElementById("eyeIcon");
    const hide  = input.type === "password";
    input.type  = hide ? "text" : "password";
    icon.innerHTML = hide
      ? `<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
               d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.542-7a9.953 9.953 0 012.159-3.362m2.649-2.35A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.542 7a9.953 9.953 0 01-4.042 4.442M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
               d="M3 3l18 18" />`
      : `<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
               d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
               d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />`;
  }
</script>
{% endblock %}