.page(data-page="form-elements")
  .navbar
    .navbar-inner
      .left
        a(href="forms.html").back.link.icon-only
          i.icon.icon-back
      .center Form Elements
      .right
        a(href="#").link.open-panel.icon-only
          i.icon.icon-bars
  .page-content
    .content-block-title Full Layout
    .list-block.inputs-list
      ul
        li
          .item-content
            .item-media
              i.icon.icon-form-name
            .item-inner 
              .item-title.label Name
              .item-input
                input(type="text", placeholder="Your name")
        li
          .item-content
            .item-media
              i.icon.icon-form-email
            .item-inner 
              .item-title.label E-mail
              .item-input
                input(type="email", placeholder="E-mail")
        li
          .item-content
            .item-media
              i.icon.icon-form-url
            .item-inner 
              .item-title.label URL
              .item-input
                input(type="url", placeholder="URL")
        li
          .item-content
            .item-media
              i.icon.icon-form-password
            .item-inner 
              .item-title.label Password
              .item-input
                input(type="password", placeholder="Password")
        li
          .item-content
            .item-media
              i.icon.icon-form-tel
            .item-inner 
              .item-title.label Phone
              .item-input
                input(type="tel", placeholder="Phone")
        li
          .item-content
            .item-media
              i.icon.icon-form-gender
            .item-inner 
              .item-title.label Gender
              .item-input
                select
                  option Male
                  option Female
        li
          .item-content
            .item-media
              i.icon.icon-form-calendar
            .item-inner 
              .item-title.label Birth date
              .item-input
                input(type="date", placeholder="Birth day", value="2014-04-30")
        li
          .item-content
            .item-media
              i.icon.icon-form-calendar
            .item-inner 
              .item-title.label Date time
              .item-input
                input(type="datetime-local", placeholder="Birth day")
        li
          .item-content
            .item-media
              i.icon.icon-form-toggle
            .item-inner 
              .item-title.label Switch
              .item-input
                label.label-switch
                  input(type="checkbox")
                  .checkbox
        li
          .item-content
            .item-media
              i.icon.icon-form-settings
            .item-inner
              .item-title.label Slider
              .item-input
                .range-slider
                  input(type="range", min="0", max="100", value="50", step="0.1")
        li.align-top
          .item-content
            .item-media
              i.icon.icon-form-comment
            .item-inner 
              .item-title.label Resizeable Textarea
              .item-input
                textarea.resizable
    .content-block-title With Floating Labels
    .list-block.inputs-list
      ul
        li
          .item-content
            .item-media
              i.icon.icon-form-name
            .item-inner 
              .item-title.floating-label Your name
              .item-input
                input(type="text", placeholder="")
        li
          .item-content
            .item-media
              i.icon.icon-form-email
            .item-inner 
              .item-title.floating-label E-mail
              .item-input
                input(type="email", placeholder="")
        li
          .item-content
            .item-media
              i.icon.icon-form-url
            .item-inner 
              .item-title.floating-label URL
              .item-input
                input(type="url", placeholder="")
        li
          .item-content
            .item-media
              i.icon.icon-form-password
            .item-inner 
              .item-title.floating-label Password
              .item-input
                input(type="password", placeholder="")
        li
          .item-content
            .item-media
              i.icon.icon-form-tel
            .item-inner 
              .item-title.floating-label Phone
              .item-input
                input(type="tel", placeholder="")
        li
          .item-content
            .item-media
              i.icon.icon-form-gender
            .item-inner 
              .item-title.floating-label Gender
              .item-input
                select
                  option 
                  option Male
                  option Female
        li.align-top
          .item-content
            .item-media
              i.icon.icon-form-comment
            .item-inner 
              .item-title.floating-label Resizeable Textarea
              .item-input
                textarea.resizable
    .content-block-title Icons and inputs
    .list-block.inputs-list
      ul
        li
          .item-content
            .item-media
              i.icon.icon-form-name
            .item-inner 
              .item-input
                input(type="text", placeholder="Your name")
        li
          .item-content
            .item-media
              i.icon.icon-form-email
            .item-inner 
              .item-input
                input(type="email", placeholder="E-mail")
        li
          .item-content
            .item-media
              i.icon.icon-form-gender
            .item-inner 
              .item-input
                select
                  option Male
                  option Female
        li
          .item-content
            .item-media
              i.icon.icon-form-calendar
            .item-inner 
              .item-input
                input(type="date", placeholder="Birth day", value="2014-04-30")
        li
          .item-content
            .item-media
              i.icon.icon-form-toggle
            .item-inner 
              .item-input
                label.label-switch
                  input(type="checkbox")
                  .checkbox
    .content-block-title Labels and inputs
    .list-block.inputs-list
      ul
        li
          .item-content
            .item-inner 
              .item-title.label Name
              .item-input
                input(type="text", placeholder="Your name")
        li
          .item-content
            .item-inner 
              .item-title.label E-mail
              .item-input
                input(type="email", placeholder="E-mail")
        li
          .item-content
            .item-inner 
              .item-title.label Gender
              .item-input
                select
                  option Male
                  option Female
        li
          .item-content
            .item-inner 
              .item-title.label Birth date
              .item-input
                input(type="date", placeholder="Birth day", value="2014-04-30")
        li
          .item-content
            .item-inner 
              .item-title.label Switch
              .item-input
                label.label-switch
                  input(type="checkbox")
                  .checkbox
    .content-block-title Just inputs
    .list-block.inputs-list
      ul
        li
          .item-content
            .item-inner 
              .item-input
                input(type="text", placeholder="Your name")
        li
          .item-content
            .item-inner 
              .item-input
                input(type="email", placeholder="E-mail")
        li
          .item-content
            .item-inner 
              .item-input
                select
                  option Male
                  option Female
        li
          .item-content
            .item-inner 
              .item-input
                input(type="date", placeholder="Birth day", value="2014-04-30")
    .content-block-title Inset, just inputs
    .list-block.inset.inputs-list
      ul
        ul
        li
          .item-content
            .item-inner 
              .item-input
                input(type="text", placeholder="Your name")
        li
          .item-content
            .item-inner 
              .item-input
                input(type="email", placeholder="E-mail")
        li
          .item-content
            .item-inner 
              .item-input
                select
                  option Male
                  option Female
        li
          .item-content
            .item-inner 
              .item-input
                input(type="date", placeholder="Birth day", value="2014-04-30")