{% load helpers %}
{% if computed_fields %}
    <div class="card">
        <div class="card-header">
            <strong>Computed Fields</strong>
            <button
                aria-expanded="true"
                class="btn btn-primary btn-sm float-end"
                data-nb-target="#computed_fields_accordion_{{ advanced_ui }} .collapse"
                data-nb-toggle="collapse-all"
                type="button"
            >
                Collapse All Groups
            </button>
        </div>
        <table id="computed_fields_accordion_{{ advanced_ui }}" class="table table-hover card-body attr-table">
            {% for grouping, fields in computed_fields.items %}
                {% with forloop.counter0 as count %}
                    {% if grouping != "" %}
                        <tr>
                            <td class="position-relative" colspan="2">
                                <button
                                    aria-expanded="true"
                                    class="btn float-none fs-4 fw-medium stretched-link nb-collapse-toggle"
                                    data-bs-target=".collapseme-computed-{{ count }}"
                                    data-bs-toggle="collapse"
                                    name="grouping.{{ grouping }}"
                                    type="button"
                                >
                                    <span aria-hidden="true" class="mdi mdi-chevron-down me-4"></span><!--
                                    -->{{ grouping }}
                                </button>
                            </td>
                        </tr>
                    {% endif %}
                    {% for field, value in fields %}
                        <tr class="collapseme-computed-{{ count }} collapse show nb-transition-none">
                            <td><span title="{{ field.description }}">{{ field }}</span></td>
                            <td>
                                {% if field.output_type == 'markdown' %}
                                    {{ value|render_markdown }}
                                {% else %}
                                    {{ value }}
                                {% endif %}
                            </td>
                        </tr>
                    {% endfor %}
                {% endwith %}
            {% endfor %}
        </table>
    </div>
{% endif %}