include ../mixins/mixins.jade

extends ../layout
- title = "Form Demos"

block content
	- profileForm = {name: "Profile Info", fields: [{type: "text", name: "Full Name"}, {type: "text", name: "Occupation"}, {type: "textarea", name: "Description"}], actions: [{name: "Update Profile", title: "Update your profile", icon: "disk2"}]}
	- profileFormHorizontal = {name: "Profile Info", fields: [{type: "text", name: "Full Name", layout: "horizontal"}, {type: "text", name: "Occupation", layout: "horizontal"}, {type: "textarea", name: "Description", layout: "horizontal"}], actions: [{name: "Update Profile", title: "Update your profile", icon: "disk2"}]}
	- profileFormInline = {name: "Profile Info", layout: "inline", fields: [{type: "text", name: "Full Name"}, {type: "text", name: "Occupation"}, {type: "textarea", name: "Description"}], actions: [{name: "Update Profile", title: "Update your profile", icon: "disk2"}]}

	- registerForm = {name: "User Registration", fields: [{type: "email", name: "Email", layout: "vertical"}, {type: "password", name: "Password", layout: "vertical"}], actions: [{name: "Register", title: "Register for a new profile", icon: "forward2"}]}
	- addressForm = {name: "Address Information", fields: [{type: "text", name: "City with Datalist auto-complete", datalist: "cities"}, {type: "select", name: "Country", options: [{name: "Canada", value: "canada"}, {name: "US", value: "us"}]}], actions: [{name: "Update Address", title: "Update Address", icon: "disk2"}]}
	+demoSection("Forms")
		p By default, inputs are horizontally-arranged; however, you can customize the layout of forms along both the X and Y axis
		+demoSection("Basic Form")
			p The basic form has the default horizontally-arranged inputs, 1 per line:
			form.form(action="/", method="post")
				+renderFieldset(profileForm)
		+demoSection("Horizontal Inputs")
			p The horizontal input class is useful if you need to have an input occupy the remainder of the row; otherwise, the default will work just as well:
			form.form(action="/", method="post")
				+renderFieldset(profileFormHorizontal)
		+demoSection("Vertical Inputs")
			p For inputs that should be displayed in their own row, simply use the vertical inputs class:
			form.form(action="/", method="post")
				+renderFieldset(registerForm)
		+demoSection("Inline Form")
			p Use this form for inline form elements.  They will fold over to the next page when the screen resizes beyond them:
			form.form(action="/", method="post")
				+renderFieldset(profileFormInline)
		+demoSection("Address Form")
			- var cities = ["Calgary", "Ottawa", "Windsor", "Toronto"]
			+getDatalist(cities, "cities")
			form.form(action="/", method="post")
				+renderFieldset(addressForm)
		+demoSection("Appended Controls")
			- var currencyForm = {name: "Expenses", fields: [{type: "number", min: 0, step: "any", name: "Cash Flow", appended: {before: {icon: "coin-dollar"}}}, {type: "number", min: 0, max: 100, step: "any", name: "Balance", appended: {after: {icon: "coin-dollar"}}}, {type: "number", name: "Annual Interest (%)", min: 0, max: 100, step: "any", appended: {after: {text: "%"}}}, {type: "file", name: "Annual Report", appended: {after: {icon: "upload", classNames: "button"}}}], actions: [{name: "File Report", title: "Submit this report for analysis", icon: "disk2"}]}
			- var socialForm = {name: "Share and Tell", fields: [{type: "text", name: "Twitter Username", appended: {before: {text: "@"}}}, {type: "text", name: "github2 Username", appended: {before: {icon: "github2"}}}]}
			form.form(action="/", method="post")
				+renderFieldset(currencyForm)
				+renderFieldset(socialForm)
		+demoSection("Grid Form")
			p You can use the 
				a(href="../grids.html") grid-system component
				|  to build any type of form layout.  Simply use the grid classes:
			form(action="#", method="POST")
				+getFormSection("Grid Form", "grid")
					section.form-field.row
						.column-align-middle.one-fourth
							label.form-field-label(for="aName") Name
						.column.form-field-controls
							+getFormInput("Name", "text", "aName")(required=true)
					section.form-field.row
						.column-align-middle.one-fourth
							label.form-field-label(for="address") Address
						.column.form-field-controls
							+getFormInput("Address", "text", "address")(required=true)
					section.form-field.row
						.column.one-fourth
							label.form-field-label(for="message") Message
						.column.form-field-controls
							+getFormInput("Message", "textarea", "message")(required=true)
					footer.form-actions
						+getFormAction("Send Message", "Send us your message", "mail")
			p Note: do not use the specific form classes to build the form (
				code .form-field-horizontal
				| ,
				code .form-field-vertical
				|)
			+demoSection("Fieldset Grids")
				p It may make sense to display sections of a form (fieldsets) beside each other.  Do this using the grid:
				form.form.row(action="/", method="post")
					section.column
						+renderFieldset(registerForm)
					section.column
						+renderFieldset(addressForm)