<input type="hidden" name="{{ name }}" value="">

<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 %}

            <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 %}
                    <input type="hidden" name="{{ name }}[{{ blockId }}][type]" value="{{ block.getType().handle }}">
                    <input type="hidden" name="{{ name }}[{{ blockId }}][enabled]" value="{% if block.enabled %}1{% endif %}">
                    <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: name~'['~blockId~'][fields]',
                        element: block,
                        fields: block.getType().getFieldLayout().getFields(),
                        static: static
                    } %}
                </div>
            </div>
        {% endfor %}
    </div>
    {% if not static and not staticBlocks %}
        <div class="buttons">
            <div class="btngroup">
                {% for blockType in blockTypes %}
                    <div class="btn{% if loop.first %} add icon{% endif %}" data-type="{{ blockType.handle }}">{{ blockType.name|t('site') }}</div>
                {% endfor %}
            </div>

            <div class="btn 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>
