{% load i18n %}

{% if fieldset.title %}
    <tr x-on:click="rowsOpen = !rowsOpen" class="cursor-pointer hover:bg-base-25 dark:hover:bg-base-900 transition-colors">
        <th class="bg-base-50 border-t border-base-200 font-semibold px-3 py-2 text-left text-font-important-light dark:text-font-important-dark dark:border-base-800 dark:bg-white/[.04] {% if forloop.first %}border-t-0{% endif %}" colspan="100%">
            <div class="flex items-center justify-between">
                <span>{{ fieldset.title }}</span>
                
                <span class="material-symbols-outlined select-none transition-transform duration-300 ease-in-out" title="{% trans "Toggle" %}" x-bind:class="rowsOpen ? 'rotate-180' : ''">
                    expand_more
                </span>
            </div>
        </th>
    </tr>
{% endif %}