{% extends 'base.html' %} {% block content %}
<div id="users">
  <h2>Users</h2>
  <form id="user-form" method="post" action="{{ url_for('admin_users') }}">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Username</th>
          <th>Admin</th>
          <th>Active</th>
          <th colspan="2">Password</th>
          <th>Created</th>
          <th>Last Login</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {% for u in users %}
        <tr class="user-row" data-user-id="{{ u.user_id }}">
          <td>
            {{ u.user_id }}<input
              type="hidden"
              name="user_id"
              value="{{ u.user_id }}"
            />
          </td>
          <td>
            <input
              type="text"
              name="username"
              value="{{ u.username }}"
              required
            />
          </td>
          <td>
            <input type="checkbox" name="is_admin" {{ 'checked' if u.is_admin
            else '' }} />
          </td>
          <td>
            <input type="checkbox" name="is_active" {{ 'checked' if u.is_active
            else '' }} />
          </td>
          <td>{{ '✅' if u.has_password else '❌' }}</td>
          <td><input type="password" name="password" /></td>
          <td>{{ u.created_at }}</td>
          <td>{{ u.last_login or 'never' }}</td>
          <td>
            <button type="submit" data-user-id="{{ u.user_id }}">Save</button>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </form>
</div>
<h3>Create / Update User</h3>
<form
  id="create-update-user-form"
  method="post"
  action="{{ url_for('admin_users') }}"
>
  <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
  <label>Username <input type="text" name="username" required /></label>
  <label>Password <input type="password" name="password" /></label>
  <label>Admin <input type="checkbox" name="is_admin" value="1" /></label>
  <label
    >Active <input type="checkbox" name="is_active" value="1" checked
  /></label>
  <button type="submit">Save</button>
</form>
{% endblock %} {% block footer_scripts %}
<script>
  function updateUser(userId) {
    const row = document.querySelector(`.user-row[data-user-id="${userId}"]`);
    const passwordInput = row.querySelector('input[name="password"]');
    const hasPassword =
      row.querySelector("td:nth-child(5)").textContent.trim() === "✅";
    const formData = row.querySelector("form").elements;
    const username = formData.username.value;
    const password = hasPassword ? passwordInput.value : undefined;
    const isAdmin = formData.is_admin.checked;
    const isActive = formData.is_active.checked;

    fetch("/admin/users", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        user_id: userId,
        password: password,
        username: username,
        is_admin: isAdmin,
        is_active: isActive,
        csrf_token: formData.csrf_token.value,
      }),
    })
      .then((response) => {
        if (response.ok) {
          alert("User updated successfully");
          // Clear the password field after successful update
          passwordInput.value = "";
        } else {
          alert("Error updating user");
        }
      })
      .catch((error) => {
        console.error("Error:", error);
        alert("Error updating user");
      });
  }

  function initUserForm() {
    const form = document.getElementById("user-form");
    const createUpdateForm = document.getElementById("create-update-user-form");

    form.addEventListener("submit", function (event) {
      const userId = event.target.querySelector('input[name="user_id"]').value;
      event.preventDefault(); // Prevent the default form submission
      updateUser(userId);
    });

    form.addEventListener("click", function (event) {
      const userId = event.target.closest(".user-row").dataset.userId;
      updateUser(userId);
    });

    createUpdateForm.addEventListener("submit", function (event) {
      const passwordInput = createUpdateForm.querySelector(
        'input[name="password"]'
      );
    });
  }

  initUserForm();
</script>
{% endblock %}