charasheet/src/character/templates/character/snippets/character_details/capability.html

{% with character_capability.capability as capability %}
    <div class="accordion-item">
        <h2 class="accordion-header">
            <button class="accordion-button collapsed {% if not character_capability.known %}text-bg-light{% endif %}" type="button"
                    data-bs-toggle="collapse" data-bs-target="#cap-{{ capability.pk }}">
                {{ capability.rank }}.
                {{ capability.name }}
                {% if capability.spell %}&nbsp;<i class="fa-solid fa-hand-sparkles"></i>{% endif %}
                {% if capability.limited %}&nbsp;<i class="fa-solid fa-handcuffs"></i>{% endif %}
            </button>
        </h2>
        <div id="cap-{{ capability.pk }}" class="accordion-collapse collapse">
            <div class="accordion-body">
                {{ capability.description }}
            </div>
        </div>
    </div>
{% endwith %}