{% extends 'base.html' %}
{% block title %}Groups{% endblock %}

{% block content %}
<div class="space-y-4">
  <div class="flex flex-wrap items-center justify-between gap-2">
    <h1 class="text-2xl font-bold">Security Groups</h1>
    <a href="{% url 'accounts:group_create' %}" class="btn btn-primary btn-sm">Create Group</a>
  </div>

  <form method="get" class="flex gap-2">
    <input type="text" name="q" value="{{ query }}" class="input input-bordered w-full max-w-md" placeholder="Search groups" />
    <button class="btn btn-primary">Search</button>
    {% if query %}
      <a href="{% url 'accounts:group_list' %}" class="btn btn-ghost">Clear</a>
    {% endif %}
  </form>

  <div class="card border border-base-300 bg-base-100">
    <div class="overflow-x-auto">
      <table class="table table-zebra">
        <thead>
          <tr>
            <th>Name</th>
            <th>Users</th>
            <th>Capabilities</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          {% for group in groups %}
          <tr>
            <td class="font-medium">{{ group.name }}</td>
            <td>{{ group.users_count }}</td>
            <td>{{ group.capabilities_count }}</td>
            <td class="flex gap-1">
              <a href="{% url 'accounts:group_edit' group.id %}" class="btn btn-ghost btn-xs">Edit</a>
              <form method="post" action="{% url 'accounts:group_delete' group.id %}" onsubmit="return confirm('Delete group {{ group.name }}?')">
                {% csrf_token %}
                <button class="btn btn-ghost btn-xs text-error" type="submit">Delete</button>
              </form>
            </td>
          </tr>
          {% empty %}
          <tr><td colspan="4" class="text-center opacity-70">No groups found.</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>
{% endblock %}