<div class="alphabet-bar-container collapsed">
    <div class="alphabet-bar">
        <!-- <span class="alphabet-bar-title">Filter by</span> -->
        <div class="letter-chip" data-letter="#" title="Numbers">
            #<span class="count"></span>
        </div>
        {% for letter in "ABCDEFGHIJKLMNOPQRSTUVWXYZ" %}
        <div class="letter-chip" data-letter="{{ letter }}" title="{{ letter }}">
            {{ letter }}<span class="count"></span>
        </div>
        {% endfor %}
        <div class="letter-chip" data-letter="@" title="Special characters">
            @<span class="count"></span>
        </div>
        <div class="letter-chip" data-letter="漢" title="CJK characters">
            漢<span class="count"></span>
        </div>
    </div>
    <div class="toggle-alphabet-bar" title="Toggle alphabet filter">
        <i class="fas fa-chevron-right"></i>
    </div>
</div>