{% macro renderBlock(page, group, block, extraClasses) %}
  {% if page._edit %}
    <div {% if block.id %}data-id="{{ block.id }}"{% endif %} class="{{ extraClasses }} apos-block-wrapper"{% if block.type %} data-type="{{block.type}}"{% endif %} data-block-wrapper>
      <div class="apos-block-controls apos-ui-container" data-block-controls>
        <span class="apos-ui-btn-group">
          <a class="apos-button apos-ui-btn" href="#" data-block-handle><i class="icon-move"></i></a>{#
          #}<span class="apos-button apos-ui-btn apos-ui-move-up" data-move-block="up"><i class="icon-arrow-up"></i></span>{#
          #}<span class="apos-button apos-ui-btn apos-ui-move-down" data-move-block="down"><i class="icon-arrow-down"></i></span>
        </span>
        <ul {% if block.id %}data-id="{{ block.id }}"{% endif %} class="apos-blocks-menu apos-ui  " href="#">
          <li>
          <span data-content-block-menu-toggle class="apos-ui-btn apos-button apos-ui-dropdown"><i class="icon-reorder"></i>&nbsp;Layout</span>
            <ul {% if block.id %}data-id="{{ block.id }}"{% endif %} class="apos-editor2-content-menu-options apos-block-menu-options apos-ui-menu" data-content-block-menu-options>
            {% for type in types %}
              <li href="#" {% if type.name == block.type %} class="active"{% endif %} data-switch-block data-type="{{ type.name | e }}">
                {% if type.icon %}<i class="icon {{type.icon}}"></i>{% endif %}
                {{ type.label | e }}
              </li>
            {% endfor %}
            </ul>
          </li>
        </ul>
        <a class="apos-button apos-ui-btn" href="#" data-remove-block><i class="icon-trash"></i></a>
      </div>
      <div class="apos-block" data-block>
        {% if block.type %}
          {{ partial(block.type, { page: page, user: user, prefix: group + '_' + block.id + '_' }) }}
        {% else %}
          {# This block is the template, it will have content later after cloning #}
        {% endif %}
      </div>
    </div>
  {% else %}
    {# When not editing we render with no extra wrappers #}
    {{ partial(block.type, { page: page, user: user, prefix: group + '_' + block.id + '_' }) }}
  {% endif %}
{% endmacro %}

{% if page._edit %}
  <div class="apos-block-group" data-block-group="{{ group | e }}" data-slug="{{ page.slug | e }}">
    <div class="apos-block-group-controls apos-ui-container">
      <span class="apos-ui-btn" data-content-blocks-menu=""><i class="icon-plus"></i> Add {{(groupLabel | e) or ('Block')}}  </span>
      <ul class="apos-block-menu-options apos-ui-menu" data-content-blocks-menu-options="">
        {% for type in types %}
          <li data-new-block data-type="{{ type.name | e }}">
            {% if type.icon %}<i class="icon {{type.icon}}"></i>{% endif %}
            {{ type.label | e }}
          </li>
{#           <a class="apos-button apos-ui-button" href="#" >+ {{ type.label | e }}</a> #}
        {% endfor %}
      </ul>
    </div>
    <div class="apos-blocks" data-apos-blocks>
      {# Existing blocks #}
      {% for block in blocks %}
        {{ renderBlock(page, group, block, '') }}
      {% endfor %}
      {# This is a hidden DOM template which will be used by JS to build new blocks #}
      {{ renderBlock(page, group, {}, 'apos-template') }}
    </div>
  </div>
{% else %}
  {# When not editing we render with no extra wrappers #}
  {% for block in blocks %}
    {{ renderBlock(page, group, block, '') }}
  {% endfor %}
{% endif %}