    <ol class="breadcrumb">
		<li><a href="#/">Dashboard</a></li>
		<li>Form</li>
		<li class="active">Form Components</li>
	</ol>


<div class="container-fluid" ng-controller="FormComponentsController">

<div data-widget-group="group1">

	<div class="panel panel-default" data-widget='{"draggable": "false"}'>
		<div class="panel-heading">
			<h2>Basic Form Elements</h2>
			<div class="panel-ctrls" data-actions-container="" data-action-collapse='{"target": ".panel-body"}'></div>
		</div>
		<div class="panel-body">
			<form action="" class="form-horizontal row-border">
				<div class="form-group">
					<label class="col-sm-2 control-label">Simplest Input</label>
					<div class="col-sm-8">
						<input type="text" class="form-control">
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-2 control-label">Password Field</label>
					<div class="col-sm-8">
						<input type="password" class="form-control">
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-2 control-label">Input with Placeholder</label>
					<div class="col-sm-8">
						<input type="text" class="form-control" placeholder="Placeholder">
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-2 control-label">Disabled Input</label>
					<div class="col-sm-8">
						<input type="text" class="form-control" placeholder="Disabled Input" disabled>
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-2 control-label">Read only field</label>
					<div class="col-sm-8">
						<input type="text" class="form-control" readonly="readonly" value="Read only text goes here">
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-2 control-label">With pre-defined value</label>
					<div class="col-sm-8">
						<input type="text" class="form-control" value="http://">
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-2 control-label">With max length</label>
					<div class="col-sm-8">
						<input type="text" class="form-control" maxlength="20" placeholder="max 20 characters here">
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-2 control-label">Popover Input</label>
					<div class="col-sm-8">
						<input type="text" class="form-control popovers" placeholder="Popover Input" data-trigger="hover" data-toggle="popover" data-content="And here's some amazing content. It's very engaging. right?" data-original-title="A Title">
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-2 control-label">Tooltip Input</label>
					<div class="col-sm-8">
						<input type="text" class="form-control tooltips" data-trigger="hover" data-original-title="Tooltip text goes here. Tooltip text goes here.">
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-2 control-label">Select Box</label>
					<div class="col-sm-8">
						<select class="form-control" id="source">
							<optgroup label="Alaskan/Hawaiian Time Zone">
								<option value="AK">Alaska</option>
								<option value="HI">Hawaii</option>
							</optgroup>
							<optgroup label="Pacific Time Zone">
								<option value="CA">California</option>
								<option value="NV">Nevada</option>
								<option value="OR">Oregon</option>
								<option value="WA">Washington</option>
							</optgroup>
							<optgroup label="Mountain Time Zone">
								<option value="AZ">Arizona</option>
								<option value="CO">Colorado</option>
								<option value="ID">Idaho</option>
								<option value="MT">Montana</option><option value="NE">Nebraska</option>
								<option value="NM">New Mexico</option>
								<option value="ND">North Dakota</option>
								<option value="UT">Utah</option>
								<option value="WY">Wyoming</option>
							</optgroup>
							<optgroup label="Central Time Zone">
								<option value="AL">Alabama</option>
								<option value="AR">Arkansas</option>
								<option value="IL">Illinois</option>
								<option value="IA">Iowa</option>
								<option value="KS">Kansas</option>
								<option value="KY">Kentucky</option>
								<option value="LA">Louisiana</option>
								<option value="MN">Minnesota</option>
								<option value="MS">Mississippi</option>
								<option value="MO">Missouri</option>
								<option value="OK">Oklahoma</option>
								<option value="SD">South Dakota</option>
								<option value="TX">Texas</option>
								<option value="TN">Tennessee</option>
								<option value="WI">Wisconsin</option>
							</optgroup>
							<optgroup label="Eastern Time Zone">
								<option value="CT">Connecticut</option>
								<option value="DE">Delaware</option>
								<option value="FL">Florida</option>
								<option value="GA">Georgia</option>
								<option value="IN">Indiana</option>
								<option value="ME">Maine</option>
								<option value="MD">Maryland</option>
								<option value="MA">Massachusetts</option>
								<option value="MI">Michigan</option>
								<option value="NH">New Hampshire</option><option value="NJ">New Jersey</option>
								<option value="NY">New York</option>
								<option value="NC">North Carolina</option>
								<option value="OH">Ohio</option>
								<option value="PA">Pennsylvania</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option>
								<option value="VT">Vermont</option><option value="VA">Virginia</option>
								<option value="WV">West Virginia</option>
							</optgroup>
						</select>
					</div>
				</div>

				<div class="form-group">
					<label class="col-sm-2 control-label">Disabled Dropdown</label>
					<div class="col-sm-8">
						<select class="form-control" disabled placeholder="Disabled Dropdown">
							<option>Alaska</option>
							<option>Lorem ipsum dolor.</option>
							<option>Amet, impedit aperiam?</option>
							<option>Nemo, alias, quasi?</option>
							<option>Inventore, expedita.</option>
						</select>
					</div>
				</div>

				<div class="form-group">
					<label class="col-sm-2 control-label">Multi-select Box</label>
					<div class="col-sm-8">
						<select class="form-control" multiple>
							<option>Lorem ipsum dolor.</option>
							<option>Amet, impedit aperiam?</option>
							<option>Nemo, alias, quasi?</option>
							<option>Inventore, expedita.</option>
						</select>
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-2 control-label">Inline Radio</label>
					<div class="col-sm-8">
						<label class="radio-inline icheck">
							<input icheck type="radio" id="inlineradio1" value="option1" name="optionsRadiosInline" > Option 1
						</label>
						<label class="radio-inline icheck">
							<input icheck type="radio" id="inlineradio2" value="option2" name="optionsRadiosInline" > Option 2
						</label>
						<label class="radio-inline icheck">
							<input icheck type="radio" id="inlineradio3" value="option3" name="optionsRadiosInline" > Option 3
						</label>
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-2 control-label">Radio</label>
					<div class="col-sm-8">

						<label class="radio icheck">
							<input icheck type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
							Option one is this and that
						</label>

						<label class="radio icheck">
							<input icheck type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
							Option two can be something else
						</label>

					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-2 control-label">Inline Checkbox</label>
					<div class="col-sm-8">
						<label class="checkbox-inline icheck">
							<input icheck type="checkbox" id="inlinecheckbox1" value="option1"> Option 1
						</label>
						<label class="checkbox-inline icheck">
							<input icheck type="checkbox" id="inlinecheckbox2" value="option2"> Option 2
						</label>
						<label class="checkbox-inline icheck">
							<input icheck type="checkbox" id="inlinecheckbox3" value="option3"> Option 3
						</label>
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-2 control-label">Checkbox</label>
					<div class="col-sm-8">

							<label class="checkbox icheck">
								<input icheck type="checkbox" value="">
								Option one is this and that
							</label>
							
							<label class="checkbox icheck">
								<input icheck type="checkbox" value="">
								Option two can be something else
							</label>

					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-2 control-label">Textarea</label>
					<div class="col-sm-8">
						<textarea class="form-control"></textarea>
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-2 control-label">Autogrow Textarea</label>
					<div class="col-sm-8">
						<textarea class="form-control autosize"></textarea>
					</div>
					<div class="col-sm-2"><p class="help-block">Textbox auto grows as you type!</p></div>
				</div>
				<div class="form-group">
					<label class="col-sm-2 control-label">Fullscreen Textarea</label>
					<div class="col-sm-8">
						<textarea class="form-control fullscreen"></textarea>
					</div>
				</div>
			</form>
			
		</div>
		<div class="panel-footer">
			<div class="row">
				<div class="col-sm-8 col-sm-offset-2">
					<button class="btn-primary btn">Submit</button>
					<button class="btn-default btn">Cancel</button>
				</div>
			</div>
		</div>
	</div>

	<div class="panel panel-default demo-icheck" data-widget='{"draggable": "false"}'>
		<div class="panel-heading"><h2>Custom Checkboxes and Radio Buttons</h2>
				<div class="panel-ctrls"
					data-actions-container="" 
					data-action-collapse='{"target": ".panel-body"}'
				>
				</div>
		</div>
		<div class="panel-body">
			
			<div class="alert alert-info">
				<h4>iCheck</h4>
				<p>Super customized checkbox and radio buttons that are backward compatible and appears identical in both desktop and mobile.</p>
			</div>

			<div class="row">
				<div class="col-sm-4">
					<h4>Minimal Skin <small>Default - <em>Customized for Avenxo</em></small></h4>
					<div class="row">
						<div class="col-sm-6 icheck-minimal">
							<div class="checkbox icheck"><label><input icheck="minimal-red" type="checkbox" value="" checked>Red</label></div>
							<div class="checkbox icheck"><label><input icheck="minimal-green" type="checkbox" value="" checked>Green</label></div>
							<div class="checkbox icheck"><label><input icheck="minimal-aero" type="checkbox" value="" checked>Aero</label></div>
							<div class="checkbox icheck"><label><input icheck="minimal-blue" type="checkbox" value="" checked>Blue</label></div>
							<div class="checkbox icheck"><label><input icheck="minimal-grey" type="checkbox" value="" checked>Grey</label></div>
							<div class="checkbox icheck"><label><input icheck="minimal-orange" type="checkbox" value="" checked>Orange</label></div>
							<div class="checkbox icheck"><label><input icheck="minimal-pink" type="checkbox" value="" checked>Pink</label></div>
							<div class="checkbox icheck"><label><input icheck="minimal-purple" type="checkbox" value="" checked>Purple</label></div>
							<div class="checkbox icheck"><label><input icheck="minimal-yellow" type="checkbox" value="" checked>Yellow</label></div>
						</div>
						<div class="col-sm-6 icheck-minimal">
							<div class="radio icheck"><label><input icheck="minimal-red" type="radio" name="optionsRadios-minimal" value="option1" checked>Red</label></div>
							<div class="radio icheck"><label><input icheck="minimal-green" type="radio" name="optionsRadios-minimal" value="option2">Green</label></div>
							<div class="radio icheck"><label><input icheck="minimal-aero" type="radio" name="optionsRadios-minimal" value="option2">Aero</label></div>
							<div class="radio icheck"><label><input icheck="minimal-blue" type="radio" name="optionsRadios-minimal" value="option2">Blue</label></div>
							<div class="radio icheck"><label><input icheck="minimal-grey" type="radio" name="optionsRadios-minimal" value="option2">Grey</label></div>
							<div class="radio icheck"><label><input icheck="minimal-orange" type="radio" name="optionsRadios-minimal" value="option2">Orange</label></div>
							<div class="radio icheck"><label><input icheck="minimal-pink" type="radio" name="optionsRadios-minimal" value="option2">Pink</label></div>
							<div class="radio icheck"><label><input icheck="minimal-purple" type="radio" name="optionsRadios-minimal" value="option2">Purple</label></div>
							<div class="radio icheck"><label><input icheck="minimal-yellow" type="radio" name="optionsRadios-minimal" value="option2">Yellow</label></div>
						</div>
					</div>
				</div>
				<div class="col-sm-4">
					<h4>Flat Skin</h4>
					<div class="row">
						<div class="col-sm-6 icheck-flat">
							<div class="checkbox icheck"><label><input icheck="flat-red" type="checkbox" value="" checked>Red</label></div>
							<div class="checkbox icheck"><label><input icheck="flat-green" type="checkbox" value="" checked>Green</label></div>
							<div class="checkbox icheck"><label><input icheck="flat-aero" type="checkbox" value="" checked>Aero</label></div>
							<div class="checkbox icheck"><label><input icheck="flat-blue" type="checkbox" value="" checked>Blue</label></div>
							<div class="checkbox icheck"><label><input icheck="flat-grey" type="checkbox" value="" checked>Grey</label></div>
							<div class="checkbox icheck"><label><input icheck="flat-orange" type="checkbox" value="" checked>Orange</label></div>
							<div class="checkbox icheck"><label><input icheck="flat-pink" type="checkbox" value="" checked>Pink</label></div>
							<div class="checkbox icheck"><label><input icheck="flat-purple" type="checkbox" value="" checked>Purple</label></div>
							<div class="checkbox icheck"><label><input icheck="flat-yellow" type="checkbox" value="" checked>Yellow</label></div>
						</div>
						<div class="col-sm-6 icheck-flat">
							<div class="radio icheck"><label><input icheck="flat-red" type="radio" name="optionsRadios-flat" value="option1" checked>Red</label></div>
							<div class="radio icheck"><label><input icheck="flat-green" type="radio" name="optionsRadios-flat" value="option2">Green</label></div>
							<div class="radio icheck"><label><input icheck="flat-aero" type="radio" name="optionsRadios-flat" value="option2">Aero</label></div>
							<div class="radio icheck"><label><input icheck="flat-blue" type="radio" name="optionsRadios-flat" value="option2">Blue</label></div>
							<div class="radio icheck"><label><input icheck="flat-grey" type="radio" name="optionsRadios-flat" value="option2">Grey</label></div>
							<div class="radio icheck"><label><input icheck="flat-orange" type="radio" name="optionsRadios-flat" value="option2">Orange</label></div>
							<div class="radio icheck"><label><input icheck="flat-pink" type="radio" name="optionsRadios-flat" value="option2">Pink</label></div>
							<div class="radio icheck"><label><input icheck="flat-purple" type="radio" name="optionsRadios-flat" value="option2">Purple</label></div>
							<div class="radio icheck"><label><input icheck="flat-yellow" type="radio" name="optionsRadios-flat" value="option2">Yellow</label></div>
						</div>
					</div>
				</div>
				<div class="col-sm-4">
					<h4>Square Skin</h4>
					<div class="row">
						<div class="col-sm-6 icheck-square">
							<div class="checkbox icheck"><label><input icheck="square-red" type="checkbox" value="" checked>Red</label></div>
							<div class="checkbox icheck"><label><input icheck="square-green" type="checkbox" value="" checked>Green</label></div>
							<div class="checkbox icheck"><label><input icheck="square-aero" type="checkbox" value="" checked>Aero</label></div>
							<div class="checkbox icheck"><label><input icheck="square-blue" type="checkbox" value="" checked>Blue</label></div>
							<div class="checkbox icheck"><label><input icheck="square-grey" type="checkbox" value="" checked>Grey</label></div>
							<div class="checkbox icheck"><label><input icheck="square-orange" type="checkbox" value="" checked>Orange</label></div>
							<div class="checkbox icheck"><label><input icheck="square-pink" type="checkbox" value="" checked>Pink</label></div>
							<div class="checkbox icheck"><label><input icheck="square-purple" type="checkbox" value="" checked>Purple</label></div>
							<div class="checkbox icheck"><label><input icheck="square-yellow" type="checkbox" value="" checked>Yellow</label></div>
						</div>
						<div class="col-sm-6 icheck-square">
							<div class="radio icheck"><label><input icheck="square-red" type="radio" name="optionsRadios-square" value="option1" checked>Red</label></div>
							<div class="radio icheck"><label><input icheck="square-green" type="radio" name="optionsRadios-square" value="option2">Green</label></div>
							<div class="radio icheck"><label><input icheck="square-aero" type="radio" name="optionsRadios-square" value="option2">Aero</label></div>
							<div class="radio icheck"><label><input icheck="square-blue" type="radio" name="optionsRadios-square" value="option2">Blue</label></div>
							<div class="radio icheck"><label><input icheck="square-grey" type="radio" name="optionsRadios-square" value="option2">Grey</label></div>
							<div class="radio icheck"><label><input icheck="square-orange" type="radio" name="optionsRadios-square" value="option2">Orange</label></div>
							<div class="radio icheck"><label><input icheck="square-pink" type="radio" name="optionsRadios-square" value="option2">Pink</label></div>
							<div class="radio icheck"><label><input icheck="square-purple" type="radio" name="optionsRadios-square" value="option2">Purple</label></div>
							<div class="radio icheck"><label><input icheck="square-yellow" type="radio" name="optionsRadios-square" value="option2">Yellow</label></div>
						</div>
					</div>
				</div>
			</div>

		</div>
	</div>


	<div class="panel panel-default" data-widget='{"draggable": "false"}'>
		<div class="panel-heading"><h2>Toggle Switches</h2>
			<div class="panel-ctrls"
				data-actions-container="" 
				data-action-collapse='{"target": ".panel-body"}'
			>
			</div>
		</div>
		<div class="panel-body">
			<form action="" class="form-horizontal row-border">
				<div class="form-group pb10">
					<label class="col-sm-2 control-label" style="font-size: 12px; padding-top: 3px !important;" >Switchery Mini</label>
					<div class="col-sm-8">
						<ul class="demo-btns mb-10 xs">
							<li><input type="checkbox" class=" switchery-xs" checked ui-switch="{color: $parent.getBrandColor('primary')}" ng-init="someModel1=true" ng-model="someModel1" /></li>
							<li><input type="checkbox" class=" switchery-xs" checked ui-switch="{color: $parent.getBrandColor('success')}" ng-init="someModel2=true" ng-model="someModel2" /></li>
							<li><input type="checkbox" class=" switchery-xs" checked ui-switch="{color: $parent.getBrandColor('warning')}" ng-init="someModel3=true" ng-model="someModel3" /></li>
							<li><input type="checkbox" class=" switchery-xs" checked ui-switch="{color: $parent.getBrandColor('inverse')}" ng-init="someModel4=true" ng-model="someModel4" /></li>
							<li><input type="checkbox" class=" switchery-xs" checked ui-switch="{color: $parent.getBrandColor('danger')}" ng-init="someModel5=true" ng-model="someModel5" /></li>
							<li><input type="checkbox" class=" switchery-xs" checked ui-switch="{color: $parent.getBrandColor('info')}" ng-init="someModel6=true" ng-model="someModel6" /></li>
						</ul>
					</div>
				</div>
				<div class="form-group pb10">
					<label class="col-sm-2 control-label label-input-sm" >Switchery Small</label>
					<div class="col-sm-8">
						<ul class="demo-btns mb-10 sm">
							<li><input type="checkbox" class=" switchery-sm" checked ui-switch="{color: $parent.getBrandColor('primary')}" ng-init="someModel7=true" ng-model="someModel7" /></li>
							<li><input type="checkbox" class=" switchery-sm" checked ui-switch="{color: $parent.getBrandColor('success')}" ng-init="someModel8=true" ng-model="someModel8" /></li>
							<li><input type="checkbox" class=" switchery-sm" checked ui-switch="{color: $parent.getBrandColor('warning')}" ng-init="someModel9=true" ng-model="someModel9" /></li>
							<li><input type="checkbox" class=" switchery-sm" checked ui-switch="{color: $parent.getBrandColor('inverse')}" ng-init="someModel10=true" ng-model="someModel10" /></li>
							<li><input type="checkbox" class=" switchery-sm" checked ui-switch="{color: $parent.getBrandColor('danger')}" ng-init="someModel11=true" ng-model="someModel11" /></li>
							<li><input type="checkbox" class=" switchery-sm" checked ui-switch="{color: $parent.getBrandColor('info')}" ng-init="someModel12=true" ng-model="someModel12" /></li>
						</ul>
					</div>
				</div>
				<div class="form-group pb10">
					<label class="col-sm-2 control-label" >Switchery Default</label>
					<div class="col-sm-8">
						<ul class="demo-btns mb-10 nm">
							<li><input type="checkbox" class="" checked ui-switch="{color: $parent.getBrandColor('primary')}" ng-init="someModel13=true" ng-model="someModel13" /></li>
							<li><input type="checkbox" class="" checked ui-switch="{color: $parent.getBrandColor('success')}" ng-init="someModel14=true" ng-model="someModel14" /></li>
							<li><input type="checkbox" class="" checked ui-switch="{color: $parent.getBrandColor('warning')}" ng-init="someModel15=true" ng-model="someModel15" /></li>
							<li><input type="checkbox" class="" checked ui-switch="{color: $parent.getBrandColor('inverse')}" ng-init="someModel16=true" ng-model="someModel16" /></li>
							<li><input type="checkbox" class="" checked ui-switch="{color: $parent.getBrandColor('danger')}" ng-init="someModel17=true" ng-model="someModel17" /></li>
							<li><input type="checkbox" class="" checked ui-switch="{color: $parent.getBrandColor('info')}" ng-init="someModel18=true" ng-model="someModel18" /></li>
						</ul>
					</div>
				</div>
			</form>
		</div>
	</div>

	<div class="panel panel-default" data-widget='{"draggable": "false"}'>
		<div class="panel-heading">
			<h2>Input Groups</h2>
				<div class="panel-ctrls"
					data-actions-container="" 
					data-action-collapse='{"target": ".panel-body"}'
				>
				</div>
		</div>
		<div class="panel-body">
			<form action="" class="form-horizontal row-border">
				<div class="form-group">
					<label class="col-sm-2 control-label">Before Text Field</label>
					<div class="col-sm-8">
						<div class="input-group">
							<span class="input-group-addon">@</span>
							<input type="text" class="form-control" placeholder="Username">
						</div>
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-2 control-label">After Text Field</label>
					<div class="col-sm-8">
						<div class="input-group">
							<input type="text" class="form-control">
							<span class="input-group-addon">.00</span>
						</div>
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-2 control-label">Both</label>
					<div class="col-sm-8">
						<div class="input-group">
							<span class="input-group-addon">$</span>
							<input type="text" class="form-control">
							<span class="input-group-addon">.00</span>
						</div>
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-2 control-label">Checkbox</label>
					<div class="col-sm-8">
						<div class="input-group">
							<span class="input-group-addon icheck">
								<input type="checkbox">
							</span>
							<input type="text" class="form-control">
						</div>
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-2 control-label">Radio</label>
					<div class="col-sm-8">
						<div class="input-group">
							<span class="input-group-addon icheck">
								<input type="radio">
							</span>
							<input type="text" class="form-control">
						</div>
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-2 control-label">Buttons instead of text</label>
					<div class="col-sm-8">
						<div class="input-group">
							<input type="text" class="form-control">
							<div class="input-group-btn">
								<button type="button" class="btn btn-info">Go!</button>
							</div>
						</div>
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-2 control-label">Buttons with Dropdowns</label>
					<div class="col-sm-8">
						<div class="input-group">
							<input type="text" class="form-control">
							<div class="input-group-btn">
								<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">Action <i class="fa fa-angle-down"></i></button>
								<ul class="dropdown-menu pull-right">
									<li><a href="#">Action</a></li>
									<li><a href="#">Another action</a></li>
									<li><a href="#">Something else here</a></li>
									<li class="divider"></li>
									<li><a href="#">Separated link</a></li>
								</ul>
							</div>
						</div>
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-2 control-label">Segmentded Dropdown</label>
					<div class="col-sm-8">
						<div class="input-group">
							<input type="text" class="form-control">
							<div class="input-group-btn">
								<button type="button" class="btn btn-info">Action</button>
								<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"><i class="fa fa-angle-down"></i></button>
								<ul class="dropdown-menu pull-right">
									<li><a href="#">Action</a></li>
									<li><a href="#">Another action</a></li>
									<li><a href="#">Something else here</a></li>
									<li class="divider"></li>
									<li><a href="#">Separated link</a></li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</form>
		</div>
	</div>

	<div class="panel panel-default" data-widget='{"draggable": "false"}'>
		<div class="panel-heading">
			<h2>Autocomplete</h2>
				<div class="panel-ctrls"
					data-actions-container="" 
					data-action-collapse='{"target": ".panel-body"}'
				>
				</div>
		</div>
		<div class="panel-body">
			<div class="col-12">
				<p>A fast, full-featured, autocomplete library can prefet data, search that data on the client, and then falling back to the server. Powered by Twitter Typeahead.</p>
			</div>
		<form action="" class="form-horizontal row-border">
			<div class="form-group">
				<label class="col-sm-3 control-label">Autocomplete</label>
				<div class="col-sm-6">
				<div class="input-icon right typeahead">
					<i ng-show="loadingLocations" class="fa fa-refresh fa-spin"></i>
					<input type="text" ng-model="asyncSelected" placeholder="Type in a location" typeahead="address for address in getLocation($viewValue)" typeahead-loading="loadingLocations" class="form-control">
				</div>

				</div>
			</div>
		</form>
		</div>
	</div>


	<div class="panel panel-default" data-widget='{"draggable": "false"}'>
		<div class="panel-heading">
			<h2>Advanced Select Boxes</h2>
				<div class="panel-ctrls"
					data-actions-container="" 
					data-action-collapse='{"target": ".panel-body"}'
				>
				</div>
		</div>
		<div class="panel-body">
		<form action="" class="form-horizontal row-border">

			<div class="form-group">
				<label class="col-sm-3 control-label">Dropdown with Search</label>
				<div class="col-sm-6">
  <ui-select ng-model="selectedCountry.selected" title="Choose a country">
    <ui-select-match placeholder="Select or search a country in the list...">{{$select.selected}}</ui-select-match>
    <ui-select-choices repeat="countryIterator in countries | filter: $select.search">
      <span ng-bind-html="countryIterator | highlight: $select.search"></span>
    </ui-select-choices>
  </ui-select>
 <p>Selected: {{selectedCountry.selected}}</p>
				</div>
			</div>

			<div class="form-group">
				<label class="col-sm-3 control-label">Select with Multiple</label>
				<div class="col-sm-6">
   <ui-select multiple ng-model="selectedCountries.selected" close-on-select="false" title="Choose a country">
    <ui-select-match placeholder="Select or search a country in the list...">{{$select.selected[$index]}}</ui-select-match>
    <ui-select-choices repeat="countryIterator in countries | filter: $select.search">
      <span ng-bind-html="countryIterator | highlight: $select.search"></span>
    </ui-select-choices>
  </ui-select>
 <p>Selected: {{selectedCountries.selected}}</p>
					<p class="help-block">Select2 also supports multi-value select boxes. The <code>select</code> above is declared with the <code>multiple</code> attribute. Select2 automatially picks up on this</p>
				</div>
			</div>

			<div class="form-group">
				<label class="col-sm-3 control-label">Remote Data (e.g. Google geocode API)</label>
				<div class="col-sm-6">
  <ui-select ng-model="address.selected"
             theme="bootstrap"
             ng-disabled="disabled"
             reset-search-input="false"
             style="width: 300px;"
             title="Choose an address">
    <ui-select-match placeholder="Enter an address...">{{$select.selected.formatted_address}}</ui-select-match>
    <ui-select-choices repeat="address in addresses track by $index"
             refresh="refreshAddresses($select.search)"
             refresh-delay="0">
      <div ng-bind-html="address.formatted_address | highlight: $select.search"></div>
    </ui-select-choices>
  </ui-select>
					<p class="help-block">The selectbox has AJAX/JSONP support built in. In this example we will search for a movie using Rotten Tomatoes API. When result-list is scrolled to an end, more results are lazy-appended</p>
				</div>
			</div>

			<div class="form-group">
				<label class="col-sm-3 control-label">Tagging Support</label>
				<div class="col-sm-6">
  <ui-select multiple ng-model="multipleDemo.colors" theme="bootstrap" close-on-select="false" title="Choose a color">
    <ui-select-match placeholder="Select colors...">{{$item}}</ui-select-match>
    <ui-select-choices repeat="color in availableColors | filter:$select.search">
      {{color}}
    </ui-select-choices>
  </ui-select>
  <p>Selected Tags: {{multipleDemo.colors}}</p>
					<p class="help-block">Quickly set up fields for tagging</p>
				</div>
			</div>
		</form>
		</div>
	</div>

	<div class="panel panel-default" data-widget='{"draggable": "false"}'>
		<div class="panel-heading">
			<h2>Card</h2>
				<div class="panel-ctrls"
					data-actions-container="" 
					data-action-collapse='{"target": ".panel-body"}'
				>
				</div>
		</div>
		<div class="panel-body">
			<div class="alert alert-info">
				<h4>Card <small>A better credit card form</small></h4>
				<p>Card will take any credit card form and make it the best part of the checkout process (without you changing anything). Everything is created with pure CSS, HTML, and Javascript — no images required.</p>
			</div>
			<div class="row">
				<div class="col-sm-6">
					<form action="" class="form-horizontal card" data-credit-card="{ container: '.card-wrapper'}">
						<div class="form-group">
							<label for="#" class="col-sm-4 control-label">Card Number</label>	
							<div class="col-sm-8">
								<input placeholder="Card number" type="text" name="number" class="form-control">
							</div>
						</div>
						<div class="form-group">
							<label for="#" class="col-sm-4 control-label">Full Name</label>	
							<div class="col-sm-8">
								<input placeholder="Full name" type="text" name="name" class="form-control">
							</div>
						</div>
						<div class="form-group">
							<label for="#" class="col-sm-4 control-label">Expiry</label>	
							<div class="col-sm-8">
								<input placeholder="MM/YY" type="text" name="expiry" class="form-control">
							</div>
						</div>
						<div class="form-group">
							<label for="#" class="col-sm-4 control-label">CVC</label>	
							<div class="col-sm-8">
								<input placeholder="CVC" type="text" name="cvc" class="form-control">
							</div>
						</div>
					</form>
				</div>
				<div class="col-sm-6">
					<div class="card-wrapper"></div>
				</div>
			</div>
		</div>
	</div>

	<div class="panel panel-default" data-widget='{"draggable": "false"}'>
		<div class="panel-heading">
			<h2>File Input</h2>
				<div class="panel-ctrls"
					data-actions-container="" 
					data-action-collapse='{"target": ".panel-body"}'
				>
				</div>
		</div>
		<div class="panel-body">
			<form action="" class="form-horizontal row-border">

				<div class="form-group">
					<label class="col-sm-2 control-label">File input group</label>
					<div class="col-sm-8">
						<div class="fileinput fileinput-new" data-provides="fileinput">
							<div class="input-group">
								<div class="form-control uneditable-input" data-trigger="fileinput">
									<i class="fa fa-file fileinput-exists"></i>&nbsp;<span class="fileinput-filename"></span>
								</div>
								<span class="input-group-btn">
									<a href="#" class="btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
									<span class="btn btn-default btn-file">
										<span class="fileinput-new">Select file</span>
										<span class="fileinput-exists">Change</span>
										<input type="file" name="...">
									</span>
									
								</span>
							</div>
						</div>
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-2 control-label">File input button</label>
					<div class="col-sm-8">
						<div class="fileinput fileinput-new" data-provides="fileinput">
							<span class="btn btn-default btn-file">
								<span class="fileinput-new">Select file</span>
								<span class="fileinput-exists">Change</span>
								<input type="file" name="...">
							</span>
							<span class="fileinput-filename"></span>
							<a href="#" class="close fileinput-exists" data-dismiss="fileinput" style="float: none">&times;</a>
						</div>
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-2 control-label">Image Upload Widgets</label>
					<div class="col-sm-5">
						<div class="fileinput fileinput-new" style="width: 100%;" data-provides="fileinput">
							<div class="fileinput-preview thumbnail mb20" data-trigger="fileinput" style="width: 100%; height: 150px;"></div>
							<div>
								<a href="#" class="btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
								<span class="btn btn-default btn-file"><span class="fileinput-new">Select image</span><span class="fileinput-exists">Change</span><input type="file" name="..."></span>
							</div>
						</div>
					</div>
					<div class="col-sm-4">
						<div class="alert alert-info">Image preview only works in IE10+, FF3.6+, Safari6.0+, Chrome6.0+ and Opera11.1+. In older browsers the filename is shown instead.</div>
					</div>
				</div>

			</form>
		</div>
	</div>

</div>

</div> <!-- container-fluid -->

