{% load static %}
<div class="d-flex flex-wrap gap-3 ms-font-previews" id="msFontPreviews">
    {% for font_slug in allowed_fonts %}
    <div class="ms-font-preview-card border rounded p-2 text-center cursor-pointer {% if selected_font == font_slug %}active{% endif %}" 
         data-font="{{ font_slug }}">
        <div class="font-preview-sample h3 mb-1">
            Aa
        </div>
        <div class="small fw-semibold">{{ font_slug|title }}</div>
    </div>
    {% endfor %}
</div>