{% extends 'base.html' %} {% load static %} {% block title %}Login -
AIBOTXCHANGE{% endblock %} {% block content %}
<div
  class="min-h-screen bg-gray-50 flex flex-col justify-center py-12 sm:px-6 lg:px-8"
>
  <div class="sm:mx-auto sm:w-full sm:max-w-md">
    <div class="text-center">
      <h2 class="text-center text-3xl font-bold text-gray-900">
        Sign in to your account
      </h2>
      <p class="mt-2 text-center text-sm text-gray-600">
        Welcome back to AIBOTXCHANGE
      </p>
    </div>
  </div>

  <div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
    <div class="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">
      <form class="space-y-6" method="post">
        {% csrf_token %} {% if form.non_field_errors %}
        <div
          class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded"
        >
          {{ form.non_field_errors }}
        </div>
        {% endif %}

        <div>
          <label for="{{ form.username.id_for_label }}" class="form-label">
            Username
          </label>
          <div class="mt-1">
            {{ form.username }} {% if form.username.errors %}
            <div class="text-red-600 text-sm mt-1">
              {{ form.username.errors }}
            </div>
            {% endif %}
          </div>
        </div>

        <div>
          <label for="{{ form.password.id_for_label }}" class="form-label">
            Password
          </label>
          <div class="mt-1">
            {{ form.password }} {% if form.password.errors %}
            <div class="text-red-600 text-sm mt-1">
              {{ form.password.errors }}
            </div>
            {% endif %}
          </div>
        </div>

        <div class="flex items-center justify-between">
          <div class="flex items-center">
            <input
              id="remember-me"
              name="remember-me"
              type="checkbox"
              class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
            />
            <label for="remember-me" class="ml-2 block text-sm text-gray-900">
              Remember me
            </label>
          </div>

          <div class="text-sm">
            <a href="#" class="font-medium text-blue-600 hover:text-blue-500">
              Forgot your password?
            </a>
          </div>
        </div>

        <div>
          <button
            type="submit"
            class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-300"
          >
            Sign in
          </button>
        </div>
      </form>

      <div class="mt-6">
        <div class="relative">
          <div class="absolute inset-0 flex items-center">
            <div class="w-full border-t border-gray-300"></div>
          </div>
          <div class="relative flex justify-center text-sm">
            <span class="px-2 bg-white text-gray-500"
              >Don't have an account?</span
            >
          </div>
        </div>

        <div class="mt-6">
          <a
            href="{% url 'accounts:signup' %}"
            class="w-full flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 transition duration-300"
          >
            Create new account
          </a>
        </div>
      </div>

      <!-- Test Account Info -->
      <div class="mt-6 bg-blue-50 border border-blue-200 rounded-md p-4">
        <div class="flex">
          <div class="flex-shrink-0">
            <i class="fas fa-info-circle text-blue-400"></i>
          </div>
          <div class="ml-3">
            <h3 class="text-sm font-medium text-blue-800">Test Account</h3>
            <div class="mt-2 text-sm text-blue-700">
              <p><strong>Username:</strong> vadil</p>
              <p><strong>Password:</strong> Shivji*1000</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}