<%
  row = cell(:elements, :row).new
  block = cell(:elements, :block).new(class: 'xs-12 sm-12 md-12')
  code = cell(:elements, :code).new
  form = cell(:inputs, :form).new(url: '#', method: 'get')
%>

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

  <%=raw block.open %>

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

    <p>A Select is a normal input select.</p>

  <%=raw block.close %>

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

<hr>
<%=raw cell(:elements, :title).new(label: 'Normal Select input', size: 3) %>

<%=raw row.open %>

  <%=raw block.open %>

    <%=raw form.open %>

      <%=raw row.open %>

        <%=raw cell(:inputs, :select).new(name: 'sample', label: 'Select an item', options: ['Pippo', 'Luigi', 'Gino']) %>

      <%=raw row.close %>

    <%=raw form.close %>
    
  <%=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(:inputs, :select).new(name: 'sample', label: 'Select an item', options: ['Pippo', 'Luigi', 'Gino']) <%= erb_close_tag %>

<%=raw code.close %>

<%=raw block.close %>

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

<hr>
<%=raw cell(:elements, :title).new(label: 'Select input with hash options', size: 3) %>

<%=raw row.open %>

  <%=raw block.open %>

    <%=raw form.open %>

      <%=raw row.open %>

        <%=raw cell(:inputs, :select).new(name: 'sample', label: 'Select an item', options: [
          {im_the_value: 1, im_the_name: 'Pippo'},
          {im_the_value: 2, im_the_name: 'Luigi'},
          {im_the_value: 3, im_the_name: 'Hino'}
        ], option_value: 'im_the_value', option_name: 'im_the_name') %>

      <%=raw row.close %>

    <%=raw form.close %>
    
  <%=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(:inputs, :select).new(name: 'sample', label: 'Select an item', options: [
  {im_the_value: 1, im_the_name: 'Pippo'},
  {im_the_value: 2, im_the_name: 'Luigi'},
  {im_the_value: 3, im_the_name: 'Hino'}
], option_value: 'im_the_value', option_name: 'im_the_name') <%= erb_close_tag %>

<%=raw code.close %>

<%=raw block.close %>

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

<hr>
<%=raw cell(:elements, :title).new(label: 'Select input with create option', size: 3) %>

<%=raw row.open %>

  <%=raw block.open %>

    <%=raw form.open %>

      <%=raw row.open %>

        <%=raw cell(:inputs, :select).new(name: 'sample', label: 'Select an item', options: ['Pippo', 'Luigi', 'Gino'], create: true) %>

      <%=raw row.close %>

    <%=raw form.close %>
    
  <%=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(:inputs, :select).new(name: 'sample', label: 'Select an item', options: ['Pippo', 'Luigi', 'Gino'], create: true)<%= erb_close_tag %>

<%=raw code.close %>

<%=raw block.close %>

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

<hr>
<%=raw cell(:elements, :title).new(label: 'Select input with multiple option', size: 3) %>

<%=raw row.open %>

  <%=raw block.open %>

    <%=raw form.open %>

      <%=raw row.open %>

        <%=raw cell(:inputs, :select).new(name: 'sample', label: 'Select multiple items',
        options: ['Pippo', 'Luigi', 'Gino'], multiple: true, value: ['Pippo', 'Luigi']) %>

      <%=raw row.close %>

    <%=raw form.close %>
    
  <%=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(:inputs, :select).new(name: 'sample', label: 'Select multiple items', options: ['Pippo', 'Luigi', 'Gino'], multiple: true, value: ['Pippo', 'Luigi'])<%= erb_close_tag %>

<%=raw code.close %>

<%=raw block.close %>

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

<hr>
<%=raw cell(:elements, :title).new(label: 'Select input with custom data attributes', size: 3) %>

<%=raw row.open %>

  <%=raw block.open %>

    <%=raw form.open %>

      <%=raw row.open %>

        <%=raw cell(:inputs, :select).new(name: 'sample', label: 'Select an item',
        options: ['Pippo', 'Luigi', 'Gino'], attributes: {
          foo: 'bar'
        }) %>

      <%=raw row.close %>

    <%=raw form.close %>
    
  <%=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(:inputs, :select).new(name: 'sample', label: 'Select an item',
  options: ['Pippo', 'Luigi', 'Gino'], attributes: {
    foo: 'bar'
})<%= erb_close_tag %>

<%=raw code.close %>

<%=raw block.close %>

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

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

  <%=raw block.open %>

    <%=raw cell(:elements, :title).new(label: 'Other settings', size: 3) %>

    <p>
    The <b>Select input</b>, has some others configurations (<i>help</i>, <i>required</i>,
    <i>placeholder</i> and <i>class</i>) like the <b>Text input</b>. <br>
    Watch the <a href="<%= lato_core.doc_cells_inputs_text_path %>">Text input</a> documentation for more examples.
    </p>

  <%=raw block.close %>

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