{% if query and sections %}
<div class="card shadow-sm border mm-search-suggestions-dropdown"
     data-testid="global-search-suggestions"
     role="listbox"
     aria-label="Search suggestions for {{ query }}">
    <div class="card-body p-2">
        {% for section in sections %}
        <div class="mb-2" data-testid="global-search-suggestions-{{ section.key }}">
            <div class="small fw-semibold text-muted text-uppercase px-2 py-1">
                {{ section.label }}
                <span class="badge bg-secondary ms-1">{{ section.count }}</span>
            </div>
            <ul class="list-unstyled mb-0">
                {% for item in section.items %}
                <li>
                    <a href="{% url 'mockup_search_results' %}?q={{ query|urlencode }}"
                       class="d-block px-2 py-1 rounded text-decoration-none mm-search-suggestion-link"
                       data-testid="global-search-suggestion-{{ section.key }}-{{ item.id }}">
                        <span class="fw-medium">{{ item.title_html }}</span>
                        <span class="small text-muted d-block text-truncate">{{ item.context_html }}</span>
                    </a>
                </li>
                {% endfor %}
            </ul>
        </div>
        {% endfor %}
        <div class="border-top pt-2 mt-1 px-2">
            <a href="{% url 'mockup_search_results' %}?q={{ query|urlencode }}"
               class="small fw-semibold"
               data-testid="global-search-see-all-results">
                See all results ({{ total_count }})
            </a>
        </div>
    </div>
</div>
{% endif %}