{% load i18n %}
<div class="space-y-1.5 pt-3">
    <h4 class="text-[10px] font-bold text-on-surface-variant uppercase tracking-wider">
        By {{ title }}
    </h4>
    <ul class="space-y-1 max-h-[160px] overflow-y-auto custom-scrollbar">
        {% for choice in choices %}
            <li class="{% if choice.selected %}font-semibold text-primary{% else %}text-on-surface-variant{% endif %} text-xs">
                <a href="{{ choice.query_string|stringformat:'s' }}" 
                   class="block px-2.5 py-1.5 rounded-lg hover:bg-surface-low transition-all truncate {% if choice.selected %}bg-primary/10 text-primary font-bold{% else %}hover:text-on-surface{% endif %}" 
                   title="{{ choice.display }}">
                    {{ choice.display }}
                </a>
            </li>
        {% endfor %}
    </ul>
</div>