{% load card_badge %}
{% if group_by and groups %}
    {% for group in groups %}
        <div class="divider">{{ group.group }}</div>
        <div class="flex justify-center flex-wrap gap-4">
            {% for card in group.cards %}
                <a href="{% url 'cards:card_detail' card.pk %}">
                    {% card_badge card "" %}
                </a>
            {% endfor %}
        </div>
    {% endfor %}
{% else %}
    <div class="flex justify-center flex-wrap gap-4">
        {% for card in cards %}
            <a href="{% url 'cards:card_detail' card.pk %}">
                {% card_badge card "" %}
            </a>
        {% endfor %}
    </div>
{% endif %}

<!-- Pagination Controls -->
<div class="mt-6">
    {% if is_paginated %}
        <div class="flex justify-center space-x-2">
            {% if page_obj.has_previous %}
                <button class="btn btn-outline" @click="$dispatch('change-page', { page: {{ page_obj.previous_page_number }} })">
                    Previous
                </button>
            {% endif %}
            <span>Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}</span>
            {% if page_obj.has_next %}
                <button class="btn btn-outline" @click="$dispatch('change-page', { page: {{ page_obj.next_page_number }} })">
                    Next
                </button>
            {% endif %}
        </div>
    {% endif %}
</div>