{% extends "base.html" %}
{% block content %}
<div class="flex justify-center mt-10">
  <div class="w-full max-w-md">
    <div class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
      <h2 class="text-2xl font-bold text-irish-green mb-6 text-center">Change Password</h2>
      
      {% if error %}
      <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
        {{ error }}
      </div>
      {% endif %}
      
      {% if message %}
      <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4">
        {{ message }}
      </div>
      {% endif %}
      
      <form method="POST" action="/auth/change-password" id="password-form" onsubmit="return validateForm()">
        <div class="mb-4">
          <label class="block text-gray-700 text-sm font-bold mb-2" for="current_password">
            Current Password
          </label>
          <input 
            class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" 
            id="current_password" 
            name="current_password" 
            type="password" 
            placeholder="Enter your current password"
            required
          >
        </div>
        
        <div class="mb-4">
          <label class="block text-gray-700 text-sm font-bold mb-2" for="new_password">
            New Password
          </label>
          <input 
            class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" 
            id="new_password" 
            name="new_password" 
            type="password" 
            placeholder="Enter your new password"
            required
            oninput="checkPasswordStrength()"
          >
          <div class="mt-2">
            <div class="w-full bg-gray-200 rounded-full h-2.5">
              <div class="bg-red-600 h-2.5 rounded-full" id="password-strength-meter" style="width: 0%"></div>
            </div>
            <p class="text-xs mt-1" id="password-strength-text">Password strength: Too weak</p>
          </div>
          <ul class="text-xs text-gray-600 mt-2 list-disc pl-5">
            <li id="length-check" class="text-red-500">At least 8 characters</li>
            <li id="lowercase-check" class="text-red-500">At least one lowercase letter</li>
            <li id="uppercase-check" class="text-red-500">At least one uppercase letter</li>
            <li id="number-check" class="text-red-500">At least one number</li>
            <li id="special-check" class="text-red-500">At least one special character</li>
          </ul>
        </div>
        
        <div class="mb-6">
          <label class="block text-gray-700 text-sm font-bold mb-2" for="confirm_password">
            Confirm New Password
          </label>
          <input 
            class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" 
            id="confirm_password" 
            name="confirm_password" 
            type="password" 
            placeholder="Confirm your new password"
            required
            oninput="checkPasswordMatch()"
          >
          <p id="password-match" class="text-xs mt-1 hidden text-red-500">Passwords do not match</p>
        </div>
        
        <div id="same-password-warning" class="hidden bg-yellow-100 border border-yellow-400 text-yellow-700 px-4 py-3 rounded mb-4">
          New password is the same as your current password. Please choose a different password.
        </div>
        
        <div class="flex items-center justify-between">
          <button 
            class="bg-irish-green hover:bg-opacity-90 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" 
            type="submit"
            id="submit-button"
          >
            Change Password
          </button>
          <a 
            class="inline-block align-baseline font-bold text-sm text-irish-green hover:text-irish-green-dark" 
            href="/auth/profile"
          >
            Cancel
          </a>
        </div>
      </form>
    </div>
  </div>
</div>

<script>
  function checkPasswordStrength() {
    const password = document.getElementById('new_password').value;
    const currentPassword = document.getElementById('current_password').value;
    const meter = document.getElementById('password-strength-meter');
    const strengthText = document.getElementById('password-strength-text');
    const samePasswordWarning = document.getElementById('same-password-warning');
    
    // Check if new password matches current password
    if (password && currentPassword && password === currentPassword) {
      samePasswordWarning.classList.remove('hidden');
    } else {
      samePasswordWarning.classList.add('hidden');
    }
    
    // Check requirements
    const hasLength = password.length >= 8;
    const hasLower = /[a-z]/.test(password);
    const hasUpper = /[A-Z]/.test(password);
    const hasNumber = /\d/.test(password);
    const hasSpecial = /[!@#$%^&*(),.?":{}|<>]/.test(password);
    
    // Update requirement indicators
    document.getElementById('length-check').className = hasLength ? 'text-green-500' : 'text-red-500';
    document.getElementById('lowercase-check').className = hasLower ? 'text-green-500' : 'text-red-500';
    document.getElementById('uppercase-check').className = hasUpper ? 'text-green-500' : 'text-red-500';
    document.getElementById('number-check').className = hasNumber ? 'text-green-500' : 'text-red-500';
    document.getElementById('special-check').className = hasSpecial ? 'text-green-500' : 'text-red-500';
    
    // Calculate strength percentage (20% for each criteria)
    let strength = 0;
    if (hasLength) strength += 20;
    if (hasLower) strength += 20;
    if (hasUpper) strength += 20;
    if (hasNumber) strength += 20;
    if (hasSpecial) strength += 20;
    
    // Update meter
    meter.style.width = `${strength}%`;
    
    // Set color based on strength
    if (strength < 40) {
      meter.className = 'bg-red-600 h-2.5 rounded-full';
      strengthText.textContent = 'Password strength: Too weak';
      strengthText.className = 'text-xs mt-1 text-red-600';
    } else if (strength < 80) {
      meter.className = 'bg-yellow-500 h-2.5 rounded-full';
      strengthText.textContent = 'Password strength: Medium';
      strengthText.className = 'text-xs mt-1 text-yellow-600';
    } else {
      meter.className = 'bg-green-500 h-2.5 rounded-full';
      strengthText.textContent = 'Password strength: Strong';
      strengthText.className = 'text-xs mt-1 text-green-600';
    }
  }
  
  function checkPasswordMatch() {
    const password = document.getElementById('new_password').value;
    const confirmPassword = document.getElementById('confirm_password').value;
    const matchMessage = document.getElementById('password-match');
    
    if (confirmPassword) {
      if (password !== confirmPassword) {
        matchMessage.classList.remove('hidden');
      } else {
        matchMessage.classList.add('hidden');
      }
    }
  }
  
  function validateForm() {
    const password = document.getElementById('new_password').value;
    const confirmPassword = document.getElementById('confirm_password').value;
    const currentPassword = document.getElementById('current_password').value;
    
    // Check if passwords match
    if (password !== confirmPassword) {
      alert('New passwords do not match.');
      return false;
    }
    
    // Check if new password is same as current
    if (password === currentPassword) {
      alert('New password must be different from your current password.');
      return false;
    }
    
    // Check password requirements
    const hasLength = password.length >= 8;
    const hasLower = /[a-z]/.test(password);
    const hasUpper = /[A-Z]/.test(password);
    const hasNumber = /\d/.test(password);
    const hasSpecial = /[!@#$%^&*(),.?":{}|<>]/.test(password);
    
    if (!hasLength || !hasLower || !hasUpper || !hasNumber || !hasSpecial) {
      alert('Password does not meet the strength requirements.');
      return false;
    }
    
    return true;
  }
  
  // Initial check on page load
  window.onload = function() {
    if (document.getElementById('new_password').value) {
      checkPasswordStrength();
    }
    if (document.getElementById('confirm_password').value) {
      checkPasswordMatch();
    }
  };
</script>
{% endblock %}