{% extends "base.html" %}

{% block title %}Login | MIMANSHA{% endblock %}

{% block content %}
<div class="min-h-[calc(100vh-160px)] flex items-center justify-center p-4">
  <div class="w-full max-w-md">
    <!-- Login Card -->
    <div class="login-animation bg-white rounded-xl shadow-lg overflow-hidden">
      <!-- Header with Logo -->
      <div class="bg-gray-900 px-6 py-8 text-white text-center">
        <div class="inline-flex items-center mb-4">
          <span class="bg-white text-gray-900 text-xl font-bold px-3 py-2 rounded-lg mr-2">MI</span>
          <span class="text-2xl font-bold">MIMANSHA</span>
        </div>
        <h2 class="text-xl font-semibold">Welcome Back</h2>
        <p class="text-gray-300 mt-1">Sign in to your account</p>
      </div>
      
      <!-- Form Container -->
      <div class="px-6 py-8">
        <form id="login-form" class="space-y-6" method="POST" action="{% url 'mimansha_main:login' %}">
          {% csrf_token %}
          
          <!-- Display form errors -->
          {% if form.errors %}
          <div class="bg-red-50 border-l-4 border-red-500 p-4 mb-4">
            <div class="flex">
              <div class="flex-shrink-0">
                <i class="fas fa-exclamation-circle text-red-500"></i>
              </div>
              <div class="ml-3">
                <p class="text-sm text-red-700">
                  Your username and password didn't match. Please try again.
                </p>
              </div>
            </div>
          </div>
          {% endif %}
          
          <!-- Email field -->
          <div class="space-y-2">
            <label for="id_username" class="block text-sm font-medium text-gray-700">
              Email Address
            </label>
            <div class="relative">
              <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                <i class="fas fa-envelope text-gray-400"></i>
              </div>
              <input 
                type="email" 
                id="id_username" 
                name="username" 
                class="w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all duration-200"
                placeholder="your@email.com"
                required
                value="{{ form.username.value|default:'' }}"
              >
              <p id="email-error" class="mt-1 text-red-600 text-sm hidden">Please enter a valid email address</p>
            </div>
          </div>
          
          <!-- Password field -->
          <div class="space-y-2">
            <div class="flex items-center justify-between">
              <label for="id_password" class="block text-sm font-medium text-gray-700">
                Password
              </label>
            
            </div>
            <div class="relative">
              <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                <i class="fas fa-lock text-gray-400"></i>
              </div>
              <input 
                type="password" 
                id="id_password" 
                name="password"
                class="w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all duration-200"
                placeholder="••••••••"
                required
              >
              <button 
                type="button" 
                id="toggle-password" 
                class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600"
                aria-label="Toggle password visibility"
              >
                <i class="fas fa-eye" id="eye-icon"></i>
              </button>
            </div>
          </div>
          
          <!-- Remember me checkbox -->
          <div class="flex items-center">
            <input 
              type="checkbox" 
              id="id_remember_me" 
              name="remember_me" 
              class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"
            >
            <label for="id_remember_me" class="ml-2 block text-sm text-gray-700">
              Remember me
            </label>
          </div>
          
          <!-- If there's a next URL, include it as a hidden field -->
          {% if next %}
          <input type="hidden" name="next" value="{{ next }}">
          {% endif %}
          
          <!-- Login button -->
          <div>
            <button 
              type="submit" 
              class="w-full flex justify-center items-center bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200 cursor-pointer"
            >
              <i class="fas fa-sign-in-alt mr-2"></i>
              Sign in
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
  document.addEventListener('DOMContentLoaded', function() {
    // Email validation
    const emailInput = document.getElementById('id_username');
    const emailError = document.getElementById('email-error');
    const loginForm = document.getElementById('login-form');
    
    // Email validation function
    function validateEmail(email) {
      const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
      return re.test(String(email).toLowerCase());
    }
    
    // Validate email on input
    emailInput.addEventListener('input', function() {
      if (emailInput.value.trim() !== '' && !validateEmail(emailInput.value)) {
        emailInput.classList.add('border-red-500');
        emailError.classList.remove('hidden');
      } else {
        emailInput.classList.remove('border-red-500');
        emailError.classList.add('hidden');
      }
    });
    
    // Toggle password visibility
    const togglePassword = document.getElementById('toggle-password');
    const passwordInput = document.getElementById('id_password');
    const eyeIcon = document.getElementById('eye-icon');
    
    if (togglePassword) {
      togglePassword.addEventListener('click', function(e) {
        e.preventDefault(); // Prevent any form submission
        
        // Toggle password visibility
        const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
        passwordInput.setAttribute('type', type);
        
        // Toggle eye icon
        if (type === 'text') {
          eyeIcon.classList.remove('fa-eye');
          eyeIcon.classList.add('fa-eye-slash');
        } else {
          eyeIcon.classList.remove('fa-eye-slash');
          eyeIcon.classList.add('fa-eye');
        }
      });
    }
    
    // Ensure "Remember me" checkbox state persists
    const rememberMeCheckbox = document.getElementById('id_remember_me');
    if (rememberMeCheckbox) {
      // Check if previously stored preference exists
      const remembered = localStorage.getItem('remember_me') === 'true';
      rememberMeCheckbox.checked = remembered;
      
      // Save preference when changed
      rememberMeCheckbox.addEventListener('change', function() {
        localStorage.setItem('remember_me', this.checked);
      });
    }
  });
</script>
{% endblock %}