{% extends 'base.html' %} {% load static %} {% block title %}Admin Login -
AIBOTXCHANGE{% endblock %} {% block content %}
<div
  class="min-h-screen flex items-center justify-center bg-gradient-to-r from-blue-600 to-purple-700 py-12 px-4 sm:px-6 lg:px-8"
>
  <div class="max-w-md w-full space-y-8">
    <div>
      <div
        class="mx-auto h-12 w-12 bg-white rounded-full flex items-center justify-center"
      >
        <i class="fas fa-shield-alt text-blue-600 text-xl"></i>
      </div>
      <h2 class="mt-6 text-center text-3xl font-extrabold text-white">
        Admin Access
      </h2>
      <p class="mt-2 text-center text-sm text-blue-100">
        Secure administrative panel login
      </p>
    </div>
    <form class="mt-8 space-y-6" method="post">
      {% csrf_token %}
      <div class="rounded-md shadow-sm -space-y-px">
        <div>
          <label for="username" class="sr-only">Username</label>
          <input
            id="username"
            name="username"
            type="text"
            required
            class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm"
            placeholder="Admin Username"
          />
        </div>
        <div>
          <label for="password" class="sr-only">Password</label>
          <input
            id="password"
            name="password"
            type="password"
            required
            class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm"
            placeholder="Password"
          />
        </div>
      </div>

      {% if form.errors or error %}
      <div
        class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded"
      >
        {% for field, errors in form.errors.items %} {% for error in errors %}
        <p class="text-sm">{{ error }}</p>
        {% endfor %} {% endfor %} {% if error %}
        <p class="text-sm">{{ error }}</p>
        {% endif %}
      </div>
      {% endif %}

      <div>
        <button
          type="submit"
          class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-blue-600 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-300"
        >
          <span class="absolute left-0 inset-y-0 flex items-center pl-3">
            <i class="fas fa-lock text-blue-500 group-hover:text-blue-400"></i>
          </span>
          Sign in to Admin Panel
        </button>
      </div>

      <div class="text-center">
        <a
          href="{% url 'main:home' %}"
          class="text-blue-100 hover:text-white text-sm transition duration-300"
        >
          ← Back to Website
        </a>
      </div>
    </form>

    <!-- Security Notice -->
    <div class="bg-white bg-opacity-10 rounded-lg p-4 mt-6">
      <div class="flex items-center">
        <i class="fas fa-info-circle text-white text-lg mr-3"></i>
        <div class="text-white text-sm">
          <p class="font-semibold mb-1">Security Notice</p>
          <p class="text-blue-100">
            This is a secure administrative area. All access attempts are logged
            and monitored.
          </p>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}