{% if objectParameters.alternativDarstellung is defined and objectParameters.alternativDarstellung == '1' %}
    <div class="ce-tabs m-default mx-0">
        <div class="row g-0">
            <div class="col-12 col-md-4 col-xl-3">
                <!-- Tab-Liste mit Verweisen auf die einzelnen Tabelemente für Desktop-Darstellungen -->
                <ul id="tabs-{{ locationId }}" class="nav nav-tabs border-0" role="tablist">
                    {% for i in 1..40 %}
                        {% set headline = 'headline_' ~ i %}
                        {% if not ibexa_field_is_empty( content, headline ) %}
                    <li>
                        <a id="tab-{{ locationId }}-{{ i }}" href="#pane-{{ locationId }}-{{ i }}" class="btn btn-tertiary w-100 text-md-end{% if loop.first %} active{% endif %}" data-bs-toggle="tab" role="tab" {% if loop.first %}aria-selected="true" {%else%}aria-selected="false" {% endif%}>{{ ibexa_field_value( content, headline ) }}</a>
                    </li>
                        {% endif %}
                    {% endfor %}
                </ul>
            </div>
            <div class="col-12 col-md-8 col-xl-9">
                <!-- Inhalte befinden sich innerhalb des nachfolgenden "Content-Divs" -->
                <div id="content-{{ locationId }}" class="bg-white tab-content" role="tablist">
                {% for i in 1..40 %}
                    {% set headline = 'headline_' ~ i %}
                    {% set contentfield = 'content_' ~ i %}
                    {% if not ibexa_field_is_empty( content, headline ) %}
                    <div id="pane-{{ locationId }}-{{ i }}" class="tab-pane fade{% if loop.first %} active show{% endif %}" role="tabpanel" aria-labelledby="tab-{{ locationId }}-{{ i }}">
                        <div class="header" role="tab" id="heading-{{ locationId }}-{{ i }}">
                            <button class="btn btn-tertiary w-100" type="button" data-bs-toggle="collapse" href="#collapse-{{ locationId }}-{{ i }}" {% if loop.first %}aria-expanded="true" {% else %}aria-expanded="false" {% endif %}aria-controls="collapse-{{ locationId }}-{{ i }}">{{ ibexa_field_value( content, headline ) }}</button>
                        </div>
                        <div id="collapse-{{ locationId }}-{{ i }}" class="collapse{% if loop.first %} show{% endif %}" role="tabpanel" data-parent="#content-{{ locationId }}" aria-labelledby="heading-{{ locationId }}-{{ i }}">
                            <div class="text-wrapper">
                                {{ ibexa_render_field( content, contentfield ) }}
                            </div>
                        </div>
                    </div>
                    {% endif %}
                {% endfor %}
                </div>
            </div>
        </div>
    </div>
{% else %}
<div class="ce-accordion m-default mx-0">
    <div class="accordion" id="ce-accordion-{{ locationId }}">
        {% for i in 1..40 %}
            {# Display "description" field if not empty #}
            {% set headline = 'headline_' ~ i %}
            {% set contentfield = 'content_' ~ i %}
            {% if not ibexa_field_is_empty( content, headline ) %}
                <div class="accordion-item">
                    <span class="accordion-header" id="heading-{{ i }}">
                            <button class="accordion-button{% if not loop.first%} collapsed{% endif %}" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-{{ i }}" aria-expanded="true" aria-controls="collapse-1">
                            {{ ibexa_field_value( content, headline ) }}
                            </button>
                        </span>
                    <div id="collapse-{{ i }}" class="accordion-collapse collapse{% if loop.first %} show{% endif %}" aria-labelledby="heading-{{ i }}" data-bs-parent="#ce-accordion-{{ locationId }}">
                        <div class="accordion-body">
                            {{ ibexa_render_field( content, contentfield ) }}
                        </div>
                    </div>
                </div>
            {% endif %}
        {% endfor %}

    </div>
</div>
{% endif %}