.row
  .span3
    %h2 Left Col
    %button.btn.spin_me Start spinner
    %script
      $('.spin_me').toggle(function() {
      $(this).spin('large','#0090D5');
      }, function() {
      $(this).spin(false);
      });

  .span6
    %h1 Forms with Uniform, AutoGrowing, AutoSuggesting - h1
    = semantic_form_for 'speedo' do |f|
      / = f.semantic_errors
      = f.inputs do
        .row-fluid
          = f.input 'Title', placeholder: 'Type your title', wrapper_html: {class: 'span6'}
          = f.input 'Name', wrapper_html: {class: 'span6'}
        = f.input 'Singer', input_html: { class: 'autoSuggest' }
        = f.input 'Description', as: :text, input_html: { placeholder: 'AutoGrowing', class: 'autogrow tip', :rows => 2, title: 'Tip: you can type what you like, and this will get bigger to fit!', data: {placement: 'bottom'} }
        = f.input 'Attachment', as: :file, required: false
        = f.input 'Select', as: :select, include_blank: false, hint: 'Just select one!'
        = f.input 'Are you real?', as: :radio, wrapper_html: { class: 'inline_choices' }
        = f.input 'Which do you own?', as: :check_boxes, collection: ['Speedo','Swim Short','Bikini']
  
      %hr
      %h2 Buttons - h2
      = f.actions do
        = f.action :submit, label: 'Submit', as: :button, button_html: { class: 'btn left' }
        = f.action :cancel, label: 'Cancel', as: :link, button_html: { class: 'btn btn-danger left' }
      .btn-group
        %button.btn.btn-success
          %i.icon-plus.icon-white
          Plus icon
        %button.btn
          %i.icon-cog
          Cog icon
        %button.btn.btn-danger
          %i.icon-remove.icon-white
          Remove icon
      = link_to 'Bootstrap buttons docs', 'http://twitter.github.com/bootstrap/base-css.html#buttons', target: '_blank'

    %hr
    %h3 Sortable dataTable - h3
    %table.dataTable
      %thead
        %tr
          %th Name
          %th Username
      %tbody
        %tr
          %td Sally
          %td gurlsally
        %tr
          %td Dave
          %td davieboy
        %tr
          %td Hilary
          %td hermahili

    %hr
    %h4 Inputs with bonuses - h4
    %select.chzn{style: 'width:200px'}
      %option Canada
      %option UK
      %option USA

    %br
    %input{type: :date, placeholder: 'yy-mm-dd'}

    %hr
    %h5 Lists - h5
    %ul
      %li This is a list:
      %li no margin 
      %li or padding 
      %li or bullets
      %li (you'll need to add them back when you need 'em)

    %hr
    %h6 Time - h6
    %pre.ib %time.ago{datetime: Time.now.iso8601}
    results in telling us when this page was loaded:
    %time.ago.notice.flash.tip{datetime: Time.now.iso8601, title: Time.now.to_s(:long)}
    %p Note: make sure you use iso8601 or you'll get errors!






  .span3
    %h3 Right Col
    %a.btn{href: '#modal', data: {toggle: 'modal', backdrop: 'static'}} Modal
    %br
    %button.btn{data: {toggle: 'modal', target: '#popup'}} Popup Help!
    %br
    = link_to 'External Popup', '/', class: 'btn', data: {toggle: 'modal', target: '#external'}


= content_for :popups do
  #modal.modal.hide
    .modal-header
      %h2 Modal
    .modal-body
      %p When you need user input, set data-backdrop to 'static' and clicking the overlay will have no effect.
    .modal-footer
      %p For example: Which are you?
      %button.btn{data:{dismiss:'modal'}} Right handed
      %button.btn{data:{dismiss:'modal'}} Left handed
      %button.btn{data:{dismiss:'modal'}} Ambidextrous
  #popup.modal.hide
    .modal-header
      %button.close{data:{dismiss:"modal"}} ×
      %h2 Helpful Popup
    .modal-body
      %p Put your popup content in "= content_for :popups do".
      %p Popups should have an #ID and .modal.hide. You can have .modal-header, -body and -footer within modals.
      %p External content can be loaded by specifying both href="external-link" and data-target="#id-of-modal". Make sure to include a .modal-body for the content to be loaded into.
      %pre
        \#external.modal.hide
        \  .modal-body
    .modal-footer
      = link_to 'View bootstrap docs', 'http://twitter.github.com/bootstrap/javascript.html#modals', target: '_blank'
  #external.modal.hide
    .modal-header
      %button.close{data:{dismiss:"modal"}} ×
      %h1 The heading isn't external
    .modal-body
    .modal-footer
      Neither is the footer