{% extends 'base.html' %}
{% block content %}
<div class="h-full flex flex-col max-w-2xl mx-auto">
  <h1 class="text-xl font-semibold mb-6">Edit User: {{ user.user_email }}</h1>
  
  <form id="userForm" class="space-y-6">
    <div>
      <label for="user_email" class="block text-sm font-medium text-slate-700">User Email</label>
      <input type="email" id="user_email" name="user_email" 
             value="{{ user.user_email }}" 
             disabled
             class="mt-1 block w-full px-3 py-2 border border-slate-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
      <p class="mt-1 text-sm text-slate-500">This field cannot be changed as it's tied to Firebase authentication.</p>
    </div>
    
    <div>
      <label for="enabled" class="block text-sm font-medium text-slate-700">Enabled</label>
      <div class="mt-1 flex items-center">
        <input type="checkbox" id="enabled" name="enabled" 
               {% if user.enabled %}checked{% endif %}
               class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-slate-300 rounded">
        <label for="enabled" class="ml-2 block text-sm text-slate-700">Check to enable this user</label>
      </div>
    </div>
    
    <div>
      <label for="is_admin" class="block text-sm font-medium text-slate-700">Admin</label>
      <div class="mt-1 flex items-center">
        <input type="checkbox" id="is_admin" name="is_admin" 
               {% if user.is_admin %}checked{% endif %}
               class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-slate-300 rounded">
        <label for="is_admin" class="ml-2 block text-sm text-slate-700">Check to make this user an admin</label>
      </div>
    </div>
    
    <div>
      <label for="case_email" class="block text-sm font-medium text-slate-700">Case Email</label>
      <input type="email" id="case_email" name="case_email" 
             value="{{ user.case_email }}" 
             class="mt-1 block w-full px-3 py-2 border border-slate-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
      <p class="mt-1 text-sm text-slate-500">The email address used for project access.</p>
    </div>
    
    <div class="flex justify-end space-x-3 pt-4">
      <button type="button" onclick="window.location.href='/admin/users'" 
              class="px-4 py-2 text-sm font-medium text-slate-700 bg-gray-100 hover:bg-gray-200 rounded-md transition-colors">
        Cancel
      </button>
      <button type="submit" 
              class="px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-md transition-colors">
        Save Changes
      </button>
    </div>
  </form>
</div>

<script>
document.getElementById('userForm').addEventListener('submit', function(e) {
  e.preventDefault();
  
  const formData = new FormData(this);
  const userData = {
    uid: '{{ user.uid }}',
    enabled: formData.get('enabled') === 'on',
    is_admin: formData.get('is_admin') === 'on',
    case_email: formData.get('case_email')
  };
  
  fetch('/admin/users/update', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(userData)
  })
  .then(response => {
    if (response.ok) {
      window.location.href = '/admin/users';
    } else {
      alert('Failed to update user: ' + response.statusText);
    }
  })
  .catch(error => {
    alert('Error updating user: ' + error.message);
  });
});
</script>
{% endblock %}