{% extends "admin_frontend/base.html" %}
{% load breadcrumbs %}
{% block title %}{{ group.name|title }} Users{% endblock %}
{% block content %}
{% render_breadcrumbs breadcrumbs %}
<div class="flex items-center justify-between mb-4">
  <h1 class="text-2xl font-semibold">Users in {{ group.name|title }}</h1>
  <a href="{% url 'orgs_admin:permissions_overview' %}" class="btn-outline">Back</a>
  </div>

<div class="bg-white rounded shadow p-4 mb-4">
  <form method="get" class="flex flex-wrap items-end gap-3">
    <div>
      <label class="block text-xs text-gray-600 mb-1">Search</label>
      <input type="text" name="q" value="{{ q }}" placeholder="Username or email" class="border rounded px-3 py-2">
    </div>
    <div>
      <label class="block text-xs text-gray-600 mb-1">Role</label>
      <select name="role" class="border rounded px-3 py-2">
        <option value="">All</option>
        {% for val,label in role_choices %}
          <option value="{{ val }}" {% if role == val %}selected{% endif %}>{{ label }}</option>
        {% endfor %}
      </select>
    </div>
    <div>
      <button class="px-3 py-2 bg-blue-600 text-white rounded">Filter</button>
      <a href="{% url 'orgs_admin:permissions_group_users' group.id %}" class="btn-outline">Reset</a>
    </div>
  </form>
  {% if page_obj %}
    <p class="text-sm text-gray-500 mt-2">Showing {{ page_obj.object_list|length }} of {{ page_obj.paginator.count }} users</p>
  {% endif %}
  
</div>

<div class="bg-white rounded shadow overflow-hidden">
  <table class="min-w-full divide-y divide-gray-200">
    <thead class="bg-gray-50">
      <tr>
        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500">Username</th>
        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500">Email</th>
        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500">Organization</th>
        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500">Role</th>
        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500">Actions</th>
      </tr>
    </thead>
    <tbody class="divide-y divide-gray-200">
      {% for u in users %}
      <tr>
        <td class="px-4 py-2">{{ u.username }}</td>
        <td class="px-4 py-2 text-gray-600">{{ u.email|default:"-" }}</td>
        <td class="px-4 py-2 text-gray-600">{{ u.recycle_profile.organization.name|default:"-" }}</td>
        <td class="px-4 py-2 text-gray-600">{{ u.recycle_profile.role|title|default:"-" }}</td>
        <td class="px-4 py-2">
          <a href="{% url 'recycle_core:org_user_edit' u.id %}" class="btn-outline btn-xs">Edit</a>
        </td>
      </tr>
      {% empty %}
      <tr><td colspan="5" class="px-4 py-4 text-center text-gray-500">No users in this group.</td></tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% include 'admin_frontend/_pagination.html' %}
{% endblock %}
