<div class="row m-b">
  <!-- main container -->
  <div class="col-sm-12 white-bg">
    <div class="row layout-builder--main-container">
      <div class="col-sm-12 col-md-4">
        <div class="layout-placeholder <%= display_border?(@view_builder.draggable_fields_main_container1) %>" id="layout-builder-draggable-main-container1" data-fields-for-container='<%= @view_builder.draggable_fields_main_container1.to_json %>'>
        </div>
      </div>

      <div class="col-sm-12 col-md-4">
        <div class="layout-placeholder <%= display_border?(@view_builder.draggable_fields_main_container2) %>" id="layout-builder-draggable-main-container2" data-fields-for-container='<%= @view_builder.draggable_fields_main_container2.to_json %>'>
        </div>
      </div>

      <div class="col-sm-12 col-md-4">
        <div class="layout-placeholder <%= display_border?(@view_builder.draggable_fields_main_container3) %>" id="layout-builder-draggable-main-container3" data-fields-for-container='<%= @view_builder.draggable_fields_main_container3.to_json %>'>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="row m-b white-bg">
  <div class="col-sm-12">
    <div class="layout-placeholder" id="droppable-list-of-relatable-tables">
      <% @view_builder.related_tables.each do |relative| %>
        <div class="draggable-list-item draggable-list-item-for-<%= relative %>" style="" data-table="<%= relative %>">
          <span><i class="fa fa-arrows" aria-hidden="true"></i> Create table - <%= relative %></span>
          <span class="pull-right remove-related-table" onclick="removeRelatedTable()"><i class="fa fa-times" aria-hidden="true"></i></span>
        </div>
      <% end %>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-lg-12 layout-placeholder hide" id="layout-builder-draggable-trash-container">
    <div class="text-center"><span><i class="fa fa-times"></i></span></div>
    <h4 class="text-center">
       Drag fields here to remove them from the view
    </h4>
  </div>
</div>
