<div id="member-table">
  <div class="overflow-x-auto rounded-lg border border-gray-700 bg-gray-800 shadow-sm">
    <table class="min-w-full divide-y divide-gray-700">
      <thead class="bg-gray-900/80">
        <tr>
          <th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-400">Username</th>
          <th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-400">Email</th>
          <th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-400">Role</th>
          <th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-400">Status</th>
          <th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-400">Joined</th>
          <th class="px-6 py-3 text-right text-xs font-medium uppercase tracking-wider text-gray-400">Actions</th>
        </tr>
      </thead>
      <tbody class="divide-y divide-gray-700/70 bg-gray-800">
        {% for membership in members %}
        <tr class="hover:bg-gray-700/40 transition-colors">
          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
            <a href="{% url 'organization:user_detail' username=membership.member.username %}" class="text-brand-light hover:text-brand">{{ membership.member.username }}</a>
          </td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">{{ membership.member.email|default:"—" }}</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm">
            {% if membership.role %}
            <a href="{% url 'organization:role_detail' slug=membership.role.slug %}" class="inline-flex rounded-full bg-purple-900/50 px-2 text-xs font-semibold leading-5 text-purple-300 hover:text-purple-200">{{ membership.role.name }}</a>
            {% else %}
            <span class="text-gray-500">--</span>
            {% endif %}
          </td>
          <td class="px-6 py-4 whitespace-nowrap">
            {% if membership.is_active %}
            <span class="inline-flex rounded-full bg-green-900/50 px-2 text-xs font-semibold leading-5 text-green-300">Active</span>
            {% else %}
            <span class="inline-flex rounded-full bg-gray-700 px-2 text-xs font-semibold leading-5 text-gray-300">Inactive</span>
            {% endif %}
          </td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">{{ membership.created_at|date:"N j, Y" }}</td>
          <td class="px-6 py-4 whitespace-nowrap text-right text-sm">
            {% if perms.organization.delete_organizationmember %}
            <a href="{% url 'organization:member_remove' username=membership.member.username %}" class="text-red-400 hover:text-red-300">Remove</a>
            {% endif %}
          </td>
        </tr>
        {% empty %}
        <tr>
          <td colspan="6" class="px-6 py-8 text-center text-sm text-gray-400">No members found.</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
