{% extends 'base.html' %} {% block content %}
<div id="users">
  <h2>Users</h2>
  <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>Password</th>
        <th>Created</th>
        <th>Last Login</th>

        <th>Edit</th>
        <th>Delete</th>
      </tr>
    </thead>
    <tbody>
      {% for u in users %}
      <tr class="user-row" data-user-id="{{ u.user_id }}">
        <td>{{ u.user_id }}</td>
        <td>
          <a href="{{ url_for('admin_user', user_id=u.user_id) }}"
            >{{ u.username }}</a
          >
        </td>
        <td>{{ '✅' if u.is_admin else '❌' }}</td>
        <td>{{ '✅' if u.is_active else '❌' }}</td>
        <td>{{ '✅' if u.has_password else '❌' }}</td>
        <td>{{ u.created_at }}</td>
        <td>{{ u.last_login or 'never' }}</td>
        <td>
          <button
            type="button"
            class="edit-user"
            data-user-id="{{ u.user_id }}"
            onclick="editUser({{ u.user_id }})"
          >
            Edit
          </button>
        </td>
        <td>
          <button
            type="button"
            class="delete-user"
            data-user-id="{{ u.user_id }}"
            onclick="deleteUser({{ u.user_id }})"
          >
            Delete
          </button>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
<h2>Create New User</h2>
<a href="{{ url_for('admin_user', user_id='new') }}">Create User</a>
{% endblock %} {% block footer_scripts %}
<script>
  function editUser(userId) {
    window.location.href = `/admin/user/${userId}`;
  }
  function deleteUser(userId) {
    if (
      confirm(
        "Are you sure you want to delete this user? This action cannot be undone."
      )
    ) {
      fetch(`/admin/user/${userId}/delete`, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          "X-CSRFToken": document.querySelector('input[name="csrf_token"]')
            .value,
        },
      })
        .then((response) => {
          if (response.ok) {
            // Remove the user row from the table
            const row = document.querySelector(
              `.user-row[data-user-id="${userId}"]`
            );
            if (row) {
              row.remove();
            }
          } else {
            alert("Error deleting user.");
          }
        })
        .catch((error) => {
          console.error("Error:", error);
          alert("Error deleting user.");
        });
    }
  }
</script>
{% endblock %}