{% extends 'generic/base.html' %}

{% block content %}
    <div class="container">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <h2 class="mb-0">User Groups</h2>
            <div>
                <a class="btn btn-sm btn-primary me-2" href="{% url 'generic:user_group_create' %}">Create new group</a>
                {% if view_all %}
                    <a class="btn btn-sm btn-outline-secondary" href="{% url 'generic:user_group_view' %}">View active</a>
                {% else %}
                    <a class="btn btn-sm btn-outline-secondary" href="{% url 'generic:user_group_view_all' %}">View all</a>
                {% endif %}
            </div>
        </div>

        <div id="groups-list">
            {% for group in groups %}
                {% include 'generic/partials/user_group_card.html' with group=group view_all=view_all %}
            {% empty %}
                <div class="alert alert-info">No groups found.</div>
            {% endfor %}
        </div>
    </div>
{% endblock %}