<%
  row = cell(:elements, :row).new
  block = cell(:elements, :block).new(class: 'xs-12 sm-12 md-12')
  code = cell(:elements, :code).new
%>

<!-- PRESENTATION -->
<%=raw row.open %>

  <%=raw block.open %>

    <%=raw cell(:elements, :title).new(label: 'Cells Widgets: Index') %>

    <p>A Index widget can be used to show the list of records on database.</p>

  <%=raw block.close %>

<%=raw row.close %>
<!-- / PRESENTATION -->

<hr>
<%=raw cell(:elements, :title).new(label: 'Index with records', size: 3) %>

<%=raw row.open %>

  <%=raw block.open %>

    <%=raw cell(:widgets, :index).new(records: @superusers) %>
    
  <%=raw block.close %>

<%=raw row.close %>

<!-- CODE SECTION -->
<%=raw row.open %>

<%=raw block.open %>

<%=raw cell(:elements, :title).new(label: 'Code', size: 6) %>

<%=raw code.open %>

<%= erb_open_tag %>=raw cell(:widgets, :index).new(records: @superusers) <%= erb_close_tag %>

<%=raw code.close %>

<%=raw block.close %>

<%=raw row.close %>
<!-- / CODE SECTION -->

<hr>
<%=raw cell(:elements, :title).new(label: 'Index with records and custom data', size: 3) %>

<%=raw row.open %>

  <%=raw block.open %>

    <%=raw cell(:widgets, :index).new(records: @widget_index_superusers,
    head: ['Name', 'Surname', 'Email', 'Username', 'Permission level', 'Last login IP'],
    columns: ['name', 'surname', 'email', 'username', 'permission', 'last_login_ip_address']) %>
    
  <%=raw block.close %>

<%=raw row.close %>

<!-- CODE SECTION -->
<%=raw row.open %>

<%=raw block.open %>

<%=raw cell(:elements, :title).new(label: 'Code', size: 6) %>

<%=raw code.open %>

<%= erb_open_tag %>=raw cell(:widgets, :index).new(records: @widget_index_superusers,
head: ['Name', 'Surname', 'Email', 'Username', 'Permission level', 'Last login IP'],
columns: ['name', 'surname', 'email', 'username', 'permission', 'last_login_ip_address']) <%= erb_close_tag %>

<%=raw code.close %>

<%=raw block.close %>

<%=raw row.close %>
<!-- / CODE SECTION -->

<hr>
<%=raw cell(:elements, :title).new(label: 'Index with actions', size: 3) %>

<%=raw row.open %>

  <%=raw block.open %>

    <%=raw cell(:widgets, :index).new(records: @widget_index_superusers, head: ['Name', 'Surname', 'Email', 'Username'],
    columns: ['name', 'surname', 'email', 'username'], index_url: lato_core.superusers_path,
    actions: {show: true, edit: true, delete: true, new: true}) %>
    
  <%=raw block.close %>

<%=raw row.close %>

<!-- CODE SECTION -->
<%=raw row.open %>

<%=raw block.open %>

<%=raw cell(:elements, :title).new(label: 'Info', size: 6) %>

<p>You need to set the <i>index_url</i> value to use actions.</p>

<%=raw cell(:elements, :title).new(label: 'Code', size: 6) %>

<%=raw code.open %>

<%= erb_open_tag %>=raw cell(:widgets, :index).new(records: @widget_index_superusers, index_url: lato_core.superusers_path,
head: ['Name', 'Surname', 'Email', 'Username'], columns: ['name', 'surname', 'email', 'username'],
actions: {show: true, edit: true, delete: true, new: true}) <%= erb_close_tag %>

<%=raw code.close %>

<%=raw block.close %>

<%=raw row.close %>
<!-- / CODE SECTION -->

<hr>
<%=raw cell(:elements, :title).new(label: 'Index with search and pagination', size: 3) %>

<%=raw row.open %>

  <%=raw block.open %>

    <%=raw cell(:widgets, :index).new(records: @widget_index_superusers, head: ['Name', 'Surname', 'Email', 'Username'],
    columns: ['name', 'surname', 'email', 'username'], index_url: lato_core.superusers_path,
    actions: {show: true, edit: true, delete: true, new: true}, search: true, pagination: true) %>
    
  <%=raw block.close %>

<%=raw row.close %>

<!-- CODE SECTION -->
<%=raw row.open %>

<%=raw block.open %>

<%=raw cell(:elements, :title).new(label: 'Info', size: 6) %>

<p>You need to set the <i>index_url</i> value to use search and/or pagination.</p>

<%=raw cell(:elements, :title).new(label: 'Code', size: 6) %>

<%=raw code.open %>

<%= erb_open_tag %>=raw cell(:widgets, :index).new(records: @widget_index_superusers, index_url: lato_core.superusers_path,
head: ['Name', 'Surname', 'Email', 'Username'], columns: ['name', 'surname', 'email', 'username'],
actions: {show: true, edit: true, delete: true, new: true}, search: true, pagination: true) <%= erb_close_tag %>

<%=raw code.close %>

<%=raw block.close %>

<%=raw row.close %>
<!-- / CODE SECTION -->

<hr>
<%=raw cell(:elements, :title).new(label: 'Override table options', size: 3) %>

<%=raw row.open %>

  <%=raw block.open %>

    <%=raw cell(:widgets, :index).new(records: @widget_index_superusers, head: ['Name', 'Surname', 'Email', 'Username'],
    columns: ['name', 'surname', 'email', 'username'], index_url: lato_core.superusers_path,
    actions: {show: true, edit: true, delete: true, new: true}, search: true, pagination: true,
    table: { fixed: true, height: 150 }, table_body: { hover: true }) %>
    
  <%=raw block.close %>

<%=raw row.close %>

<!-- CODE SECTION -->
<%=raw row.open %>

<%=raw block.open %>

<%=raw cell(:elements, :title).new(label: 'Info', size: 6) %>

<p>The index component is created with the table elements. You can ovveride the table settings with the <i>table</i> and <i>table_body</i>
options</p>

<%=raw cell(:elements, :title).new(label: 'Code', size: 6) %>

<%=raw code.open %>

<%= erb_open_tag %>=raw cell(:widgets, :index).new(records: @widget_index_superusers, head: ['Name', 'Surname', 'Email', 'Username'],
    columns: ['name', 'surname', 'email', 'username'], index_url: lato_core.superusers_path,
    actions: {show: true, edit: true, delete: true, new: true}, search: true, pagination: true,
    table: { fixed: true, height: 150 }, table_body: { hover: true }) <%= erb_close_tag %>

<%=raw code.close %>

<%=raw block.close %>

<%=raw row.close %>
<!-- / CODE SECTION -->

<hr>
<%=raw cell(:elements, :title).new(label: 'Index with sortable attributes', size: 3) %>

<%=raw row.open %>

  <%=raw block.open %>

    <%=raw cell(:widgets, :index).new(records: @widget_index_superusers,
    head: [
      {label: 'Name', sort: 'name'},
      {label: 'Surname', sort: 'surname'},
      'Email', 'Username'
    ],
    columns: ['name', 'surname', 'email', 'username'], index_url: lato_core.doc_cells_widgets_index_path,
    actions: {show: false, edit: false, delete: false, new: false}, search: true, pagination: true,
    table: { fixed: true, height: 150 }, table_body: { hover: true }) %>
    
  <%=raw block.close %>

<%=raw row.close %>

<!-- CODE SECTION -->
<%=raw row.open %>

<%=raw block.open %>

<%=raw cell(:elements, :title).new(label: 'Code', size: 6) %>

<%=raw code.open %>

<%= erb_open_tag %>raw cell(:widgets, :index).new(records: @widget_index_superusers,
    head: [
      {label: 'Name', sort: 'name'},
      {label: 'Surname', sort: 'surname'},
      'Email', 'Username'
    ],
    columns: ['name', 'surname', 'email', 'username'], index_url: lato_core.doc_cells_widgets_index_path,
    actions: {show: false, edit: false, delete: false, new: false}, search: true, pagination: true,
    table: { fixed: true, height: 150 }, table_body: { hover: true })<%= erb_close_tag %>

<%=raw code.close %>

<%=raw block.close %>

<%=raw row.close %>
<!-- / CODE SECTION -->
