{% comment %}
    A 'sequence' is a generalised structure that implements a collection of blocks that can be
    ordered, added and deleted.

    It provides the overall HTML structure, and the logic for updating hidden fields to reflect
    changes to the sequence, but NOT the UI controls for performing those changes: that is the
    responsibility of specific subtypes of 'sequence', such as list and stream.


    DO NOT PUT UI CONTROLS HERE, OR ANYTHING ELSE THAT ASSUMES A SPECIFIC VISUAL RENDERING OF THE LIST.
    (That belongs in templates that extend this one, such as list_member.html and stream_member.html.)


{% endcomment %}
<div id="{{ prefix }}-container" aria-hidden="false">
    <input type="hidden" id="{{ prefix }}-deleted" name="{{ prefix }}-deleted" value="">
    <input type="hidden" id="{{ prefix }}-order" name="{{ prefix }}-order" value="{{ index }}">
    {% block hidden_fields %}{% endblock %}

    <div>
        <div class="c-sf-container__block-container">
            <div class="c-sf-block">
                <div class="c-sf-block__header">
                    <span class="c-sf-block__header__icon">
                        <i class="icon icon-{{ child_block.meta.icon }}"></i>
                    </span>
                    <h3 class="c-sf-block__header__title"></h3>
                    <div class="c-sf-block__actions">
                        <span class="c-sf-block__type">{% block block_type_label %}{% endblock %}</span>
                        {% block header_controls %}{% endblock %}
                    </div>
                </div>
                <div class="c-sf-block__content" aria-hidden="false">
                    <div class="c-sf-block__content-inner">
                        {{ child.render_form }}
                    </div>
                </div>
            </div>
            {% block footer_controls %}{% endblock %}
        </div>
    </div>
</div>