.row-fluid
  .page-header
    %h1 Theme UI Examples

.row-fluid
  %h3 Awesome Icons
  %i.icon-spinner.icon-spin.icon-2x
  %i.icon-trash.icon-2x
  %i.icon-bar-chart.icon-2x
  %hr

.row-fluid
  %h3 Labels
  %span.label Default
  %span.label.label-success Success
  %span.label.label-warning Warning
  %span.label.label-important Important
  %span.label.label-info Info
  %span.label.label-inverse Inverse
  %hr

.row-fluid
  %h3 Badges
  %span.badge Default
  %span.badge.badge-success Success
  %span.badge.badge-warning Warning
  %span.badge.badge-important Important
  %span.badge.badge-info Info
  %span.badge.badge-inverse Inverse
  %hr

.row-fluid
  %h3 Progress Bar
  .span2
    .progress
      .bar{:style => "width: 60%;"}
  .span2
    .progress.progress-info.progress-striped
      .bar{:style => "width: 20%;"}
  .span2
    .progress.progress-danger.progress-striped.active
      .bar{:style => "width: 45%"}

  %hr

.row-fluid
  %h3 Alerts
  .row
    .span7
      .alert.alert-block
        %a.close ×
        %h4.alert-heading Alert block
        %p Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

  .row
    .span3
      .alert.alert-error
        %a.close ×
        %strong Error
        Change a few things up and try submitting again.
    .span3
      .alert.alert-success
        %a.close ×
        %strong Success
        You successfully read this important alert message.
    .span3
      .alert.alert-info
        %a.close ×
        %strong Information
        This alert needs your attention, but it's not super important.
  %hr

.row-fluid
  %h3 Form
  %form.form-horizontal.well
    %fieldset
      %legend Controls Bootstrap supports
      .control-group
        %label.control-label{:for => "input01"} Text input
        .controls
          %input#input01.input-xlarge{:type => "text"}/
          %p.help-block In addition to freeform text, any HTML5 text-based input appears like so.
      .control-group
        %label.control-label{:for => "optionsCheckbox"} Checkbox
        .controls
          %label.checkbox
            %input#optionsCheckbox{:type => "checkbox", :value => "option1"}/
            Option one is this and that—be sure to include why it's great
      .control-group
        %label.control-label{:for => "select01"} Select list
        .controls
          %select#select01
            %option something
            %option 2
            %option 3
            %option 4
            %option 5
      .control-group
        %label.control-label{:for => "multiSelect"} Multicon-select
        .controls
          %select#multiSelect{:multiple => "multiple"}
            %option 1
            %option 2
            %option 3
            %option 4
            %option 5
      .control-group
        %label.control-label{:for => "fileInput"} File input
        .controls
          %input#fileInput.input-file{:type => "file"}/
      .control-group
        %label.control-label{:for => "textarea"} Textarea
        .controls
          %textarea#textarea.input-xlarge{:rows => "3"}
      .control-group
        %label.control-label{:for => "focusedInput"} Focused input
        .controls
          %input#focusedInput.input-xlarge.focused{:type => "text", :value => "This is focused…"}/
      .control-group
        %label.control-label Uneditable input
        .controls
          %span.input-xlarge.uneditable-input Some value here
      .control-group
        %label.control-label{:for => "disabledInput"} Disabled input
        .controls
          %input#disabledInput.input-xlarge.disabled{:disabled => "", :placeholder => "Disabled input here…", :type => "text"}/
      .control-group
        %label.control-label{:for => "optionsCheckbox2"} Disabled checkbox
        .controls
          %label.checkbox
            %input#optionsCheckbox2{:disabled => "", :type => "checkbox", :value => "option1"}/
            This is a disabled checkbox
      .control-group.warning
        %label.control-label{:for => "inputWarning"} Input with warning
        .controls
          %input#inputWarning{:type => "text"}/
          %span.help-inline Something may have gone wrong
      .control-group.error
        %label.control-label{:for => "inputError"} Input with error
        .controls
          %input#inputError{:type => "text"}/
          %span.help-inline Please correct the error
      .control-group.success
        %label.control-label{:for => "inputSuccess"} Input with success
        .controls
          %input#inputSuccess{:type => "text"}/
          %span.help-inline Woohoo!
      .control-group.info
        %label.control-label{:for => "selectError"} Select with info
        .controls
          %select#selectError
            %option 1
            %option 2
            %option 3
            %option 4
            %option 5
          %span.help-inline Woohoo!
      .form-actions
        %button.btn.btn-primary{:type => "submit"} Save changes
        %button.btn{:type => "reset"} Cancel