<div id="{{ id }}" class="superTableContainer matrixLayout {{ staticField ? 'static-field' }}">
    <div class="matrixLayoutContainer">
        {% set totalNewBlocks = 0 %}

        {% for block in blocks %}
            {% set blockId = block.id %}
            {% set blockIsNew = blockId is empty %}
            {% if blockIsNew %}
                {% set totalNewBlocks = totalNewBlocks + 1 %}
                {% set blockId = 'new' ~ totalNewBlocks %}
            {% endif %}
            {% set baseInputName = "#{name}[blocks][#{blockId}]" %}
            {# only register a delta name for this black if it's not new #}
            {% if not blockIsNew %}
                {% do view.registerDeltaName(baseInputName) %}
            {% endif %}

            <div class="superTableMatrix matrixblock {{ staticField ? 'static' }}" data-id="{{ blockId }}" data-type="{{ id }}"{% if block.collapsed %} data-collapsed{% endif %}>
                {{ hiddenInput("#{name}[sortOrder][]", blockId) }}
                {{ hiddenInput("#{baseInputName}[type]", block.getType().id) }}

                {% if not staticField %}
                    <div class="titlebar">
                        <div class="blocktype"></div>
                        <div class="preview"></div>
                    </div>

                    <div class="actions">
                        <a class="settings icon menubtn" title="{{ 'Actions'|t('app') }}" role="button"></a>

                        <div class="menu">
                            <ul class="padded">
                                <li><a data-icon="collapse" data-action="collapse">{{ "Collapse"|t('app') }}</a></li>
                                <li class="hidden"><a data-icon="expand" data-action="expand">{{ "Expand"|t('app') }}</a></li>
                            </ul>

                            <hr class="padded">
                            <ul class="padded">
                                <li><a class="error" data-icon="remove" data-action="delete">{{ "Delete"|t('app') }}</a></li>
                            </ul>
                        </div>

                        <a class="move icon" title="{{ 'Reorder'|t('app') }}" role="button"></a>
                    </div>
                {% endif %}

                <div class="fields flex-fields">
                    {% include "super-table/matrix/fields" with {
                        namespace: "#{baseInputName}[fields]",
                        element: block,
                        fields: block.getType().getFieldLayout().getCustomFields(),
                        settings: supertableField,
                        registerDeltas: not blockIsNew,
                    } %}
                </div>
            </div>
        {% endfor %}
    </div>

    {% if not staticField %}
        <div class="superTableAddRow btn dashed add icon">
            {{ supertableField.selectionLabel | default("Add a row") | t('site') }}
        </div>
    {% endif %}
</div>
