{% extends "admin_frontend/base.html" %}
{% block title %}Users{% endblock %}

{% block content %}
<div class="flex items-center justify-between mb-4">
  <h1 class="text-xl font-semibold">Organization Users</h1>
  <a href="{% url 'recycle_core:org_user_create' %}" class="btn">New User</a>
  <style>.btn{background:#1d4ed8;color:#fff;padding:0.5rem 0.75rem;border-radius:0.375rem} .btn-outline{border:1px solid #cbd5e1;padding:0.375rem 0.5rem;border-radius:0.375rem}</style>
  <script>/* keep minimal inline btn styles; project uses Tailwind */</script>
  </div>

<div class="bg-white rounded shadow overflow-hidden">
  <table class="min-w-full text-sm">
    <thead class="bg-gray-50 text-left">
      <tr>
        <th class="px-4 py-2">Username</th>
        <th class="px-4 py-2">Email</th>
        <th class="px-4 py-2">Role</th>
        <th class="px-4 py-2">Actions</th>
      </tr>
    </thead>
    <tbody>
      {% for u in users %}
        <tr class="border-t">
          <td class="px-4 py-2">{{ u.username }}</td>
          <td class="px-4 py-2">{{ u.email }}</td>
          <td class="px-4 py-2">{{ u.recycle_profile.get_role_display|default:'-' }}</td>
          <td class="px-4 py-2 space-x-2">
            <a class="text-blue-600 hover:underline" href="{% url 'recycle_core:org_user_edit' u.id %}">Edit</a>
            <form method="post" action="{% url 'recycle_core:org_user_delete' u.id %}" class="inline" onsubmit="return confirm('Delete this user?')">
              {% csrf_token %}
              <button class="text-red-600 hover:underline" type="submit">Delete</button>
            </form>
          </td>
        </tr>
      {% empty %}
        <tr><td class="px-4 py-6 text-center text-gray-500" colspan="4">No users yet.</td></tr>
      {% endfor %}
    </tbody>
  </table>
</div>

{% include "admin_frontend/_pagination.html" %}
{% endblock %}
