{% extends 'base.html' %} {% block content %}
<div id="user-details">
  {% if not user %}
  <h2>Create new user</h2>
  <form id="new-user-form" method="post" action="{{ url_for('admin_users') }}">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
    <div id="user-info">
      <p>
        <strong>Username:</strong>
        <input type="text" name="username" required />
      </p>
      <p>
        <strong>Password:</strong>
        <input type="password" name="password" required />
      </p>
      <p>
        <strong>Admin:</strong>
        <input type="checkbox" name="is_admin" />
      </p>
      <p>
        <strong>Active:</strong>
        <input type="checkbox" name="is_active" />
      </p>
      <button type="submit">Create User</button>
    </div>
  </form>
  {% else %}
  <h2>User {{ user.username }}</h2>
  <form
    id="user-form"
    method="post"
    action="{{ url_for('admin_user', user_id=user.user_id) }}"
  >
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
    <input type="hidden" name="user_id" value="{{ user.user_id }}" />
    <input type="hidden" name="username" value="{{ user.username }}" />
    <div id="user-info">
      <p><strong>ID:</strong> {{ user.user_id }}</p>
      <p><strong>Username:</strong> {{ user.username }}</p>
      <p><strong>Created At:</strong> {{ user.created_at }}</p>
      <p><strong>Last Login:</strong> {{ user.last_login }}</p>
      <p>
        <strong>Admin:</strong>
        <input type="checkbox" name="is_admin" {{ 'checked' if user.is_admin
        else '' }} />
      </p>
      <p>
        <strong>Active:</strong>
        <input type="checkbox" name="is_active" {{ 'checked' if user.is_active
        else '' }} />
      </p>
      <p>
        <strong>Has Password:</strong> {{ '✅' if user.has_password else '❌' }}
      </p>
      <p>
        <strong>New Password:</strong>
        <input type="password" id="new_password" name="new_password" />
      </p>
      <button type="submit">Save</button>
    </div>
  </form>
</div>
<script>
  const userForm = document.getElementById("user-form");

  userForm.addEventListener("submit", function (event) {
    const userId = document.getElementById("user_id").value;
    event.preventDefault(); // Prevent the default form submission
    updateUser(userId);
  });

  function updateUser(userId) {
    const passwordInput = document.getElementById("new_password");
    const formData = userForm.elements;
    const username = formData.username.value;
    const password = passwordInput.value;
    const isAdmin = formData.is_admin.checked;
    const isActive = formData.is_active.checked;
    const hasPassword = passwordInput.value.trim() !== "";

    fetch("/admin/user/" + userId, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "X-CSRF-Token": formData.csrf_token.value,
      },
      body: JSON.stringify({
        user_id: userId,
        password: password,
        username: username,
        is_admin: isAdmin,
        is_active: isActive,
      }),
    })
      .then((response) => {
        if (response.ok) {
          alert("User updated successfully");
          // Clear the password field after successful update
          passwordInput.value = "";
          // Set 'has_password' indicator
          userForm.querySelector('input[name="has_password"]').value =
            hasPassword ? "✅" : "❌";
        } else {
          alert("Error updating user");
        }
      })
      .catch((error) => {
        console.error("Error:", error);
        alert("Error updating user");
      });
  }
</script>

{% endif %} {% endblock %} {% block footer_scripts %} {% endblock %}