{{ hiddenInput(name, '') }}

<div class="matrix matrix-field" id="{{ id }}">
    <div class="blocks">
        {% set totalNewBlocks = 0 %}
        {% for block in blocks %}
            {% set blockId = block.id %}
            {% if not blockId %}
                {% set totalNewBlocks = totalNewBlocks + 1 %}
                {% set blockId = 'new'~totalNewBlocks %}
            {% endif %}
            {% set baseInputName = "#{name}[blocks][#{blockId}]" %}

            <div class="matrixblock{% if not block.enabled %} disabled{% endif %}" data-id="{{ blockId }}"{% if block.collapsed %} data-collapsed{% endif %} data-type="{{ block.getType().handle }}">
                {% if not static %}
                    {{ hiddenInput("#{name}[sortOrder][]", blockId) }}
                    {% do view.registerDeltaName(baseInputName) %}
                    {{ hiddenInput("#{baseInputName}[type]", block.getType().handle) }}
                    {{ hiddenInput("#{baseInputName}[enabled]", block.enabled ? '1' : '') }}
                    <div class="titlebar">
                        <div class="blocktype{% if block.hasErrors() %} error{% endif %}">
                            {{ block.getType().name|t('site') }}
                            {% if block.hasErrors() %}<span data-icon="alert"></span>{% endif %}
                        </div>
                        <div class="preview"></div>
                    </div>
                    <div class="checkbox" title="{{ 'Select'|t('app') }}"></div>
                    <div class="actions">
                        <div class="status off" title="{{ 'Disabled'|t('app') }}"></div>
                        <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>
                                <li{% if not block.enabled %} class="hidden"{% endif %}><a data-icon="disabled" data-action="disable">{{ "Disable"|t('app') }}</a></li>
                                <li{% if block.enabled %} class="hidden"{% endif %}><a data-icon="enabled" data-action="enable">{{ "Enable"|t('app') }}</a></li>
                            </ul>
                            {% if not staticBlocks %}
                                <hr class="padded">
                                <ul class="padded">
                                    <li><a class="error" data-icon="remove" data-action="delete">{{ "Delete"|t('app') }}</a></li>
                                </ul>
                                <hr class="padded">
                                <ul class="padded">
                                    {% for blockType in blockTypes %}
                                        <li><a data-icon="plus" data-action="add" data-type="{{ blockType.handle }}">{{ "Add {type} above"|t('app', { type: blockType.name|t('site') }) }}</a></li>
                                    {% endfor %}
                                </ul>
                            {% endif %}
                        </div>
                        <a class="move icon" title="{{ 'Reorder'|t('app') }}" role="button"></a>
                    </div>
                {% endif %}
                <div class="fields">
                    {% include "_includes/fields" with {
                        namespace: "#{baseInputName}[fields]",
                        element: block,
                        fields: block.getType().getFieldLayout().getFields(),
                        static: static,
                        registerDeltas: true,
                    } %}
                </div>
            </div>
        {% endfor %}
    </div>
    {% if not static and not staticBlocks %}
        <div class="buttons">
            <div class="btngroup">
                {% for blockType in blockTypes %}
                    <div class="btn dashed{% if loop.first %} add icon{% endif %}" data-type="{{ blockType.handle }}">{{ blockType.name|t('site') }}</div>
                {% endfor %}
            </div>

            <div class="btn dashed add icon menubtn hidden">{{ "Add a block"|t('app') }}</div>
            <div class="menu">
                <ul>
                    {% for blockType in blockTypes %}
                        <li><a data-type="{{ blockType.handle }}">{{ blockType.name|t('site') }}</a></li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    {% endif %}
</div>