{{template "devtest/devtest-header"}}
<div class="page-content devtest ui container">
	<form class="ui form left-right-form">
		<h4 class="ui dividing header">Input</h4>
		<div class="inline field">
			<label>Normal</label>
			<input type="text" value="value">
		</div>
		<div class="inline field">
			<label>Readonly</label>
			<input type="text" value="value" readonly>
		</div>
		<div class="inline disabled field">
			<label>Disabled</label>
			<input type="text" value="value" disabled>
		</div>
		<div class="inline field error">
			<label>Error</label>
			<input type="text" value="value">
		</div>

		<h4 class="ui dividing header">Textarea</h4>
		<div class="inline field">
			<label>Normal</label>
			<textarea rows="2">value</textarea>
		</div>
		<div class="inline field">
			<label>Readonly</label>
			<textarea rows="2" readonly>value</textarea>
		</div>
		<div class="inline disabled field">
			<label>Disabled</label>
			<textarea rows="2" disabled>value</textarea>
		</div>
		<div class="inline field error">
			<label>Error</label>
			<textarea rows="2">value</textarea>
		</div>

		<h4 class="ui dividing header">Dropdown</h4>
		<div class="inline field">
			<label>Normal</label>
			<div class="ui selection dropdown">
				<input type="hidden" value="a">
				{{svg "octicon-triangle-down" 14 "dropdown icon"}}
				<div class="text">Option A</div>
				<div class="menu">
					<div class="item" data-value="a">Option A</div>
					<div class="item" data-value="b">Option B</div>
				</div>
			</div>
		</div>
		<div class="inline field">
			<label>Readonly</label>
			<div class="ui selection dropdown" readonly>
				<input type="hidden" value="a">
				{{svg "octicon-triangle-down" 14 "dropdown icon"}}
				<div class="text">Option A</div>
				<div class="menu">
					<div class="item" data-value="a">Option A</div>
					<div class="item" data-value="b">Option B</div>
				</div>
			</div>
		</div>
		<div class="inline disabled field">
			<label>Disabled</label>
			<div class="ui selection dropdown">
				<input type="hidden" value="a">
				{{svg "octicon-triangle-down" 14 "dropdown icon"}}
				<div class="text">Option A</div>
				<div class="menu">
					<div class="item" data-value="a">Option A</div>
					<div class="item" data-value="b">Option B</div>
				</div>
			</div>
		</div>
		<div class="inline field error">
			<label>Error</label>
			<div class="ui selection dropdown">
				<input type="hidden" value="a">
				{{svg "octicon-triangle-down" 14 "dropdown icon"}}
				<div class="text">Option A</div>
				<div class="menu">
					<div class="item" data-value="a">Option A</div>
					<div class="item" data-value="b">Option B</div>
				</div>
			</div>
		</div>

		<h4 class="ui dividing header">Required</h4>
		<div class="inline required field">
			<label>Normal</label>
			<input type="text" value="value">
		</div>
		<div class="inline required field">
			<label>Readonly</label>
			<input type="text" value="value" readonly>
		</div>
		<div class="inline required disabled field">
			<label>Disabled</label>
			<input type="text" value="value" disabled>
		</div>
		<div class="inline required field error">
			<label>Error</label>
			<input type="text" value="value">
		</div>
	</form>
</div>
{{template "devtest/devtest-footer"}}