{% block panel_widget %}

  <div id="{{ form.vars.id }}" class="panel-holder sortable items">

    {# protos #}
    {% for block_name, block_view in form.blocks %}
      <div class="block-type"
           data-type="{{ block_name }}"
           data-name="{{ block_name }}"
           data-prototype="{{ form_widget(form.blocks.offsetGet(block_name).vars.prototype)|e('html_attr') }}">
      </div>
    {% endfor %}

    {% for item in form.vars.ordered_blocks %}

      {% set block_name = item.type %}
      {% set block = item.content %}
      {% set block_type = form.blocks.offsetGet(block_name) %}

      {% for block_form_view in block_type %}
        {% if not block_form_view.rendered and block_form_view.vars.value == block %}
          {% set panel_block = block_form_view %}

          <div class="ublock ui-sortable-handle"
               data-block-type="{{ block_name }}"
               data-order="{{ panel_block.vars.value.position }}"
          >
            <div class="ublock-header">
              <h3 class="ublock-title">{{ block | raw }}</h3>
              <div class="ublock-tools">
                <span class="ublock-label bg-{% if block.id %}light-blue{% else %}yellow{% endif %}" {% if block.id %}title="{{ 'This block has not been saved'|trans }}"{% endif %}>{{ item.name }}</span>
                <button type="button" class="btn btn-ublock-tool" data-target="removeBoxItem">
                  <i class="fa fa-trash"></i></button>
                <button type="button" class="btn btn-ublock-tool" data-collapse="ublock-body">
                  <i class="fa fa-caret-down"></i></button>
              </div>
            </div>
            <div class="ublock-body" {% if panel_block.vars.valid %}style="display:none;"{% endif %}>
              {{ form_row(panel_block) }}
            </div>
          </div>
        {% endif %}
      {% endfor %}
    {% endfor %}

  </div>

  {{ form_row(form.block_select_type, {'attr': {'data-behavior': 'add-block', 'data-panel-id': form.vars.id }}) }}

  <script>
    var
      NEW_BLOCK_STR = '{{ 'New' | trans }} ',
      NOT_SAVED_STR = '{{ 'This block has not been saved'|trans }}';
  </script>

{% endblock %}