{% if query %}
    {% if results_by_section %}
        {% for section in results_by_section %}
            <div class="mb-3">
                <div class="d-flex align-items-center gap-2 px-2 small text-uppercase mb-1">
                    {% if section.icon %}
                        <i class="bi {{ section.icon }}"></i>
                    {% endif %}
                    <span>{{ section.name }}</span>
                </div>
                <div x-data class="list-group px-1">
                    {% for result in section.results %}
                        <a
                                class="text-primary list-group-item text-nowrap list-group-item-action search-palette-result d-flex align-items-center gap-3 text-truncate"
                                {{ result.generate_tag_attributes|safe }}
                        >
                            {% if result.icon %}
                                <i class="bi {{ result.icon }}"></i>
                            {% endif %}
                            <div class="lh-1">
                                {{ result.label }}
                                {% if result.description %}
                                    <span class="fs-7 text-muted"><br>{{ result.description }}</span>
                                {% endif %}
                            </div>
                        </a>
                    {% endfor %}
                </div>
            </div>
        {% endfor %}
    {% else %}
        <div class="text-center text-muted py-4">
            No results found for &quot;{{ query }}&quot;
        </div>
    {% endif %}
{% else %}
    <div class="text-center text-muted rounded py-3 border">
        Nothing to show ... type into the search to fix this!
    </div>
{% endif %}