Vertical Form

@implicitFieldConstructor = @{ b3.vertical.fieldConstructor }

@import b3.vertical.fieldConstructor

@b3.text( fooForm("foo"), '_label -> "Input Text", 'placeholder -> "A simple text..." )
@b3.email( fooForm("foo"), '_label -> "Email", 'placeholder -> "example@mail.com" )
@b3.password( fooForm("foo"), '_label -> "Password", 'placeholder -> "Password" )
@b3.file( fooForm("foo"), '_label -> "File" )

@b3.text( fooForm("foo"), '_label -> "Input Text", 'placeholder -> "A simple text..." )
@b3.text( fooForm("foo"), '_label -> "Help", '_help -> "This is a help text", 'placeholder -> "A simple text showing a help..." )
@b3.text( fooForm("foo"), '_label -> "Constraints", '_showConstraints -> true, 'placeholder -> "A simple text showing its constraints..." )
@b3.text( fooForm("foo"), 'placeholder -> "Without label" )
@b3.text( fooForm("foo"), '_label -> "A big text", 'class -> "form-control input-lg", 'placeholder -> "An awesome field..." )

@b3.textarea( fooForm("foo"), '_label -> "Textarea", 'rows -> 3 )
@b3.checkbox( fooForm("foo"), '_text -> "Checkbox", 'checked -> true )
@b3.radio( fooForm("foo"), options = Seq("M"->"Male","F"->"Female"), '_label -> "Radio Group" )
    
@fruits = @{ Seq("A"->"Apples","P"->"Pears","B"->"Bananas") }
...
@b3.select( fooForm("foo"), options = fruits, '_label -> "Select" )
@b3.select( fooForm("foo"), options = fruits, '_label -> "Multiple Select", 'multiple -> true )

@b3.text( fooForm("foo"), '_label -> "Disabled", 'disabled -> true, 'placeholder -> "Disabled text..." )
@b3.checkbox( fooForm("foo"), '_text -> "Readonly checkbox", 'readonly -> true, 'value -> true )
@b3.select( fooForm("foo"), options = fruits, '_label -> "Select", 'multiple -> true, 'readonly -> true, 'value -> "B,P" )

@b3.text( fooForm("foo"), '_label -> "Success", '_success -> true, 'placeholder -> "Success text..." )
@b3.text( fooForm("foo"), '_label -> "Warning", '_warning -> "Be carefull with this...", 'placeholder -> "Warning text..." )
@b3.text( fooForm("foo"), '_label -> "Error", '_error -> "An error occurred!", 'placeholder -> "Error text..." )
// With feedback icons
@b3.text( fooForm("foo"), '_label -> "Success", '_showIconValid -> true, 'placeholder -> "Success text..." )
@b3.text( fooForm("foo"), '_label -> "Warning", '_warning -> "Be carefull with this...", '_showIconWarning -> true, 'placeholder -> "Warning text..." )
@b3.text( fooForm("foo"), '_label -> "Error", '_showIconOnError -> true, '_error -> "An error occurred!", 'placeholder -> "Error text..." )

@b3.inputWrapped( "email", fooForm("foo"), '_label -> "Simple input group", 'placeholder -> "Custom input group for email..." ) { input =>
  <div class="input-group">
    <span class="input-group-addon">@@</span>
    @input
  </div>  
}
@b3.inputWrapped( "text", fooForm("foo"), '_label -> "Fully customized", 'placeholder -> "A complicated one..." ) { input =>
  <div class="input-group">
    <span class="input-group-addon"><span class="glyphicon glyphicon-star"></span></span>
    @input
    <div class="input-group-btn">
      <!-- Button and dropdown menu -->
    </div>
  </div>  
}
@b3.inputWrapped( "text", fooForm("foo"), '_label -> "Number", 'value -> 0, '_help -> "This needs some JavaScript and CSS" ) { input =>
  <div class="input-number input-group">
    <span class="input-group-addon input-number-minus"><span class="glyphicon glyphicon-minus"></span></span>
    @input
    <span class="input-group-addon input-number-plus"><span class="glyphicon glyphicon-plus"></span></span>
  </div>  
}

@b3.static("Static HTML"){ <a href="#"><span class="glyphicon glyphicon-star"></span> This is a link</a> }
@b3.submit('class -> "btn btn-default"){ <span class="glyphicon glyphicon-ok"></span> Submit me! }
@b3.free() {
  <button type="submit" class="btn btn-primary"> <span class="glyphicon glyphicon-ok"></span> Save changes</button>
  <a class="btn btn-default"> <span class="glyphicon glyphicon-remove"></span> Cancel</a>
}