<div class="row border-bottom white-bg m-b">
  <div class="col-sm-12">
    <div class="text-right p-h-xs" style="">
      <span class="p-w-sm">
        <a href="#" onclick="slider.prev()"><i class="fa fa-caret-left" aria-hidden="true"></i></a>
        <span class="p-w-xxs" id="layout-preview-row-id"></span>
        <a href="#" onclick="slider.next()"><i class="fa fa-caret-right" aria-hidden="true"></i></a>
      </span>

      <%= link_to 'Back to layout', edit_layout_path(params[:id]) %>
    </div>
  </div>
</div>

<div id="layout-preview-slider-container" data-simple-slider>
  <% @rows.each do |row|  %>
    <% @row = row %>
    <div class="layout-preview-slider-item" data-row-id='<%= @row['id'] %>'>
      <div class="row wrapper border-bottom white-bg page-heading">
        <div class="col-lg-10">
          <h1><%= @layout_builder.table_name.capitalize %></h1>

          <ol class="breadcrumb">
            <li class="breadcrumb-item">
              <%= link_to 'Home', dashboard_path %>
            </li>

            <li class="breadcrumb-item">
              <span>Tables</span>
            </li>

            <li class="breadcrumb-item">
              <%= link_to @layout_builder.table_name.capitalize, table_path(table: @layout_builder.table_name, id: @layout_builder.table_name.downcase) %>
            </li>

            <% if @row %>
              <li class="breadcrumb-item">
                <span><%= @row["id"] %></span>
              </li>
            <% else %>
              <li class="breadcrumb-item">
                <span>--</span>
              </li>
            <% end %>

            <li class="breadcrumb-item">
              <span>Preview</span>
            </li>
          </ol>
        </div>
      </div>

      <div class="m-t">
        <%= render 'record_placeholder', layout_builder: @layout_builder %>
      </div>
    </div>
  <% end  %>
</div>
