thrillwiki_django_no_react/templates/cotton/result_stats.html

{% comment %}
Result Statistics Component - Django Cotton Version

Displays result counts, filter summaries, and statistics for park listings.
Shows current page info, total results, and search context.

Usage Examples:

<c-result_stats 
    total_results=50
    page_obj=page_obj
    search_query="disney"
/>

<c-result_stats 
    total_results=0
    is_search=True
    search_query="nonexistent"
    class="custom-class"
/>

Parameters:
- total_results: Total number of results (required)
- page_obj: Django page object for pagination info (optional)
- search_query: Current search query (optional)
- is_search: Whether this is a search result (default: False)
- filter_count: Number of active filters (optional)
- class: Additional CSS classes (optional)

Features:
- Clear result count display
- Search context information
- Pagination information
- Filter summary
- Responsive design
{% endcomment %}

<c-vars 
    total_results
    page_obj=""
    search_query=""
    is_search=""
    filter_count=""
    class=""
/>

<div class="flex items-center justify-between text-sm text-gray-600 dark:text-gray-400 {{ class }}" role="status" aria-live="polite">
    <div class="flex items-center gap-4">
        <!-- Result Count -->
        <div class="flex items-center gap-1">
            {% if total_results == 0 %}
                <span class="font-medium text-gray-500 dark:text-gray-400">
                    {% if is_search %}
                        No parks found
                        {% if search_query %}
                            for "{{ search_query }}"
                        {% endif %}
                    {% else %}
                        No parks available
                    {% endif %}
                </span>
            {% elif total_results == 1 %}
                <span class="font-medium">1 park</span>
                {% if is_search and search_query %}
                    <span>found for "{{ search_query }}"</span>
                {% endif %}
            {% else %}
                <span class="font-medium">{{ total_results|floatformat:0 }} parks</span>
                {% if is_search and search_query %}
                    <span>found for "{{ search_query }}"</span>
                {% endif %}
            {% endif %}
        </div>

        <!-- Filter Indicator -->
        {% if filter_count and filter_count > 0 %}
            <div class="flex items-center gap-1 text-blue-600 dark:text-blue-400" role="img" aria-label="{{ filter_count }} active filter{{ filter_count|pluralize }}">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
                </svg>
                <span aria-hidden="true">{{ filter_count }} filter{{ filter_count|pluralize }} active</span>
            </div>
        {% endif %}
    </div>

    <!-- Page Information -->
    {% if page_obj and page_obj.has_other_pages %}
        <div class="flex items-center gap-2">
            <span>
                Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}
            </span>
            {% if page_obj.start_index and page_obj.end_index %}
                <span class="text-gray-400 dark:text-gray-500">|</span>
                <span>
                    Showing {{ page_obj.start_index }}-{{ page_obj.end_index }}
                </span>
            {% endif %}
        </div>
    {% endif %}
</div>

<!-- Search Suggestions -->
{% if total_results == 0 and is_search %}
    <div class="mt-3 p-3 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg">
        <div class="flex items-start gap-2">
            <svg class="w-5 h-5 mt-0.5 text-yellow-600 dark:text-yellow-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            <div class="text-sm">
                <p class="font-medium text-yellow-800 dark:text-yellow-200">No results found</p>
                <p class="mt-1 text-yellow-700 dark:text-yellow-300">
                    Try adjusting your search or removing some filters to see more results.
                </p>
                <div class="mt-2 space-y-1 text-yellow-600 dark:text-yellow-400">
                    <p>• Check your spelling</p>
                    <p>• Try more general terms</p>
                    <p>• Remove filters to broaden your search</p>
                </div>
            </div>
        </div>
    </div>
{% endif %}