{% extends "layout.html" %}
{% block content %}
<div class="page-wide">
  <div class="panel">
    <div class="panel-title">User Management</div>

    <!-- Create user form -->
    <form method="post" action="/admin/users/create" class="panel toolbar" style="gap:12px; flex-wrap:wrap; align-items:center;">
      <label class="label">Full Name</label>
      <input class="input" name="full_name" type="text" placeholder="Jane Smith" value="">

      <label class="label">Username</label>
      <input class="input" name="username" type="text" placeholder="jsmith" required>

      <label class="label">Password</label>
      <input class="input" name="password" type="password" placeholder="••••••" required>

      <label class="label">Role</label>
      <select class="select" name="role">
        <option value="user">User</option>
        <option value="admin">Admin</option>
      </select>

      <button class="btn primary" type="submit">Create</button>
    </form>

    <!-- Users table -->
    <div class="table-wrap">
      <table class="table compact" style="width:100%;">
        <thead>
          <tr>
            <th>Full Name</th>
            <th>Username</th>
            <th>Role</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          {% for u in users %}
            <tr>
              <td>{{ profiles.get(u.id, '') }}</td>
              <td>{{ u.username }}</td>
              <td>
                {% if u.id in admin_ids %}
                  Admin
                {% else %}
                  User
                {% endif %}
              </td>
              <td>
                <!-- Inline actions row: Reset Password first, then Delete on the right -->
                <form method="post" action="/admin/users/reset-password" class="inline" style="gap:8px; align-items:center; display:inline-flex;">
                  <input type="hidden" name="user_id" value="{{ u.id }}">
                  <label class="label">New password</label>
                  <input class="input" name="new_password" type="password" placeholder="New password" required>
                  <button class="btn" type="submit">Reset Password</button>
                </form>

                {% if u.id not in admin_ids %}
                  <form method="post" action="/admin/users/update-role" class="inline" style="gap:8px; display:inline-flex; margin-left:8px;">
                    <input type="hidden" name="user_id" value="{{ u.id }}">
                    <input type="hidden" name="role" value="admin">
                    <button class="btn" type="submit">Make Admin</button>
                  </form>
                {% endif %}

                <form method="post" action="/admin/users/delete" class="inline" style="gap:8px; display:inline-flex; margin-left:8px;"
                      onsubmit="return confirm('Delete user {{ u.username }}?');">
                  <input type="hidden" name="user_id" value="{{ u.id }}">
                  <button class="btn danger" type="submit">Delete</button>
                </form>
              </td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>

    {% if flash %}
      <div class="panel" style="margin-top:8px;">{{ flash }}</div>
    {% endif %}
  </div>
</div>
{% endblock %}