{{#extend "preview/layouts/layout"}}
	{{#content "content"}}
		<section class="sg_inner_wrapper">
			<h2 class="sg_h2">Form buttons</h2>
			<div class="sg_demo">
				<form>
					<fieldset>
						<p><input type="button" value="Input type button"></p>
						<p><input type="reset" value="Input type reset"></p>
						<p><input type="submit" value="Input type submit"></p>
						<p><input type="submit" value="Input type submit disabled" disabled></p>
						<p><button type="button">Button type button</button></p>
						<p><button type="reset">Button type reset</button></p>
						<p><button type="submit">Button type submit</button></p>
						<p><button type="button" disabled>Button type button disabled</button></p>
						<p><button>Button</button></p>
					</fieldset>
				</form>
			</div>
		</section>

		<section class="sg_inner_wrapper">
			<h2 class="sg_h2">Form fields default</h2>
			<div class="sg_demo">
				<form>
					<fieldset>
						<div><label>Text input</label> <input type="text"></div>
						<div><label>Text input with placeholder</label> <input type="text" placeholder="I'm placeholder text"></div>
						<div><label>Readonly input</label> <input type="text" value="Read only text input" readonly></div>
						<div><label>Disabled input</label> <input type="text" value="Disabled text input" disabled></div>
						<div><label>Required input <span class="required">*</span></label> <input type="text" required></div>
						<div><label>Email input</label> <input type="email"></div>
						<div><label>Search input</label> <input type="search"></div>
						<div><label>Speech recognition input</label> <input type="text" id="speech" name="speech" x-webkit-speech=""></div>
						<div><label>Tel input</label> <input type="tel"></div>
						<div><label>Phone (International)</label> <input name="field_country_code" maxlength="3" /> - <input name="field_city_code" maxlength="4" /> - <input name="field_phone_int" maxlength="8" /></div>
						<div><label>URL input</label> <input type="url" placeholder="http://"></div>
						<div><label>Password input</label> <input type="password" value="password"></div>
						<div><label>Select field</label> <select><option>Option 01</option><option>Option 02</option></select></div>
						<div><label>Multiple select field</label><select multiple size="5"><option>Option 1</option><option>Option 2</option><option>Option 3</option><option>Option 4</option><option>Option 5</option><option>Option 6</option><option>Option 7</option><option>Option 8</option><option>Option 9</option><option>Option 10</option></select></div>
						<div><label>Radio input</label> <input type="radio" name="rad"></div>
						<div><label>Checkbox input</label> <input type="checkbox"></div>
						<div><label><input type="radio" name="rad"> Radio input</label></div>
						<div><label><input type="checkbox"> Checkbox input</label></div>
						<div><label>File input</label> <input type="file"></div>
						<div><label>Textarea</label> <textarea cols="30" rows="5" >Textarea text</textarea></div>
						<div><label>Color input</label> <input type="color" value="#000000"></div>
						<div><label>Number input</label> <input type="number" value="5" min="0" max="10"></div>
						<div><label>Range input</label> <input type="range" id="range" value="0" min="0" max="100"> <output for="range">0</output>
							<script>
								if (document.querySelector) {
									document.querySelector('#range').onchange = function(e) {
										e.target.nextElementSibling.innerText = e.target.value;
									}
								}
							</script>
						</div>
						<div><label>Date input</label> <input type="date"></div>
						<div><label>Month input</label> <input type="month"></div>
						<div><label>Week input</label> <input type="week"></div>
						<div><label>Time input</label> <input type="time"></div>
						<div><label>Datetime input</label> <input type="datetime"></div>
						<div><label>Datetime-local input</label> <input type="datetime-local"></div>
					</fieldset>
				</form>
			</div>
		</section>

		<section class="sg_inner_wrapper">
			<h2 class="sg_h2">Form fields disabled</h2>
			<div class="sg_demo">
				<form>
					<fieldset>
						<div><label>Disabled text input</label> <input type="text" value="Disabled text input" disabled></div>
						<div><label>Disabled select field</label> <select disabled><option>Option 01</option><option>Option 02</option></select></div>
						<div><label>Disabled file input</label> <input type="file" disabled></div>
						<div><label>Disabled radio input</label> <input type="radio" name="rad" disabled></div>
						<div><label>Disabled checkbox input</label> <input type="checkbox" disabled></div>
						<div><label>Disabled color input</label> <input type="color" value="#000000" disabled></div>
						<div><label>Disabled range input</label> <input type="range" disabled></div>
						<div><label>Disabled number input</label> <input type="number" value="5" min="0" max="10" disabled></div>
						<div><label>Disabled textarea</label> <textarea cols="30" rows="5" disabled>Textarea text</textarea></div>
					</fieldset>
				</form>
			</div>
		</section>

		<section class="sg_inner_wrapper">
			<h2 class="sg_h2">Form fields readonly</h2>
			<div class="sg_demo">
				<form>
					<fieldset>
						<div><label>Readonly text input</label> <input type="text" value="Readonly text input" readonly></div>
						<div><label>Readonly range input</label> <input type="range" readonly></div>
						<div><label>Readonly number input</label> <input type="number" value="5" min="0" max="10" readonly></div>
						<div><label>Readonly textarea</label> <textarea cols="30" rows="5" readonly>Textarea text</textarea></div>
					</fieldset>
				</form>
			</div>
		</section>

		<section class="sg_inner_wrapper">
			<h2 class="sg_h2">Form fields with datalist</h2>
			<div class="sg_demo">
				<form>
					<fieldset>
						<div>
							<label>Text input with datalist</label>
							<input type="text" value="" list="fav-color" placeholder="Type your favorite color" />
							<datalist id="fav-color">
								<option value="Red"></option>
								<option value="Orange"></option>
								<option value="Yellow"></option>
								<option value="Green"></option>
								<option value="Blue"></option>
								<option value="Purple"></option>
							</datalist>
						</div>
						<div>
							<label>Range input with datalist</label>
							<input id="number_input" type="range" value="0" min="0" max="100" list="number" />
							<output for="number_input">0</output>
							<datalist id="number">
								<option>25</option>
								<option>50</option>
								<option>75</option>
							</datalist>
							<script>
								if (document.querySelector) {
									document.querySelector('#number_input').onchange = function(e) {
										e.target.nextElementSibling.innerText = e.target.value;
									}
								}
							</script>
						</div>
						<div>
							<label>Color input with datalist</label>
							<input type="color" value="#000000" list="color" />
							<datalist id="color">
								<option>#ff0000</option>
								<option>#0000ff</option>
								<option>#00ff00</option>
								<option>#ffff00</option>
								<option>#00ffff</option>
							</datalist>
						</div>
						<div>
							<label>Date input with datalist</label>
							<input type="date" list="days" />
							<datalist id="days">
								<option label="Independence Day">2013-07-04</option>
								<option label="Labor Day">2013-09-02</option>
								<option label="Columbus Day">2013-10-14</option>
							</datalist>
						</div>
						<div>
							<label>Time input with datalist</label>
							<input type="time" list="times" />
							<datalist id="times">
								<option label="Midnight">00:00</option>
								<option>06:00</option>
								<option label="Noon">12:00</option>
								<option>18:00</option>
							</datalist>
						</div>
						<div>
							<label>Datetime-local input with datalist</label>
							<input type="datetime-local" list="datetime-locals" />
							<datalist id="datetime-locals">
								<option label="Santa Visit">2012-12-24T23:59</option>
								<option label="Chrismas party">2012-12-25T18:00</option>
								<option>2012-12-30T00:00</option>
								<option label="Happy New Year">2013-01-01T00:00</option>
							</datalist>
						</div>
						<div>
							<label>Month input with datalist</label>
							<input type="month" list="months" />
							<datalist id="months">
								<option label="End of last century">2000-12</option>
								<option>2010-01</option>
								<option>2011-01</option>
								<option>2012-01</option>
								<option>2013-01</option>
							</datalist>
						</div>
						<div>
							<label>Week input with datalist</label>
							<input type="week" list="weeks" />
							<datalist id="weeks">
								<option label="First week of 2013">2013-W01</option>
								<option label="Second week of 2013">2013-W02</option>
								<option label="13th week of 2013">2013-W13</option>
								<option label="The last week of 2013">2013-W52</option>
							</datalist>
						</div>
					</fieldset>
				</form>
			</div>
		</section>

		<section class="sg_inner_wrapper">
			<h2 class="sg_h2">Form fieldset</h2>
			<div class="sg_demo">
				<form>
					<fieldset>
						<legend>Fieldset with legend</legend>
						<p><label>Text Input</label> <input type="text"></p>
						<p><input type="submit" value="Submit"></p>
					</fieldset>
					<fieldset>
						<p>Fieldset without legend</p>
						<p><label>Text Input</label> <input type="text"></p>
						<p><input type="submit" value="Submit"></p>
					</fieldset>
					<fieldset>
						<legend>Fieldset with a very, very, very, very, very, long legend that can test the display of word wrapping to see how it looks.</legend>
						<p><label>Text Input</label> <input type="text"></p>
						<p><input type="submit" value="Submit"></p>
					</fieldset>
				</form>
			</div>
		</section>
	{{/content}}
{{/extend}}