//- Needs saved

mixin form-component(id, description)
	.field-row
		label.description(for=id)= description
		block(id="ten")

mixin fieldset(name)
	fieldset
		legend= name
		.fieldset-contents
			block

mixin input(id, description, value, disabled)
	.field-row
		label.description(for=id)= description
		input(type="text" id=id name=id value=value disabled=disabled)

mixin checkbox(id, description, label, checked, disabled)
	.field-row.checkbox-row
		label.description(for=id)= description
		input.checkbox(type="checkbox" id=id name=id checked=checked disabled=disabled autocomplete="off")
		label.pill(for=id tabindex=(disabled ? null : 0) onkeypress=`[" ", "Enter"].includes(event.key) && this.click()`)= label
			span.fake-checkbox

mixin select(id, description, disabled, options)
	.field-row
		label.description(for=id)= description
		select(id=id name=id disabled=disabled)
			block

doctype html
html
	head
		title Settings | Bibliogram
		include includes/head
	body.settings-page
		if saved
			.status-notice Saved.
			script.
				history.replaceState(null, "", "/settings")
		main.settings
			form(action="/settings" method="post" enctype="application/x-www-form-urlencoded")
				h1 Settings

				+fieldset("Features")
					+select("language", "Language", true)
						option English (International)

					+checkbox("show_comments", "Display comments", "Display", false, true)

					+checkbox("link_hashtags", "Clickable hashtags", "Clickable", false, true)

					+checkbox("spa", "Fast navigation", "Enabled", true, true)

				+fieldset("Appearance")
					+select("theme", "Theme", true)
						option Classic

					+select("caption_side", "Caption side", true)
						option Left (Bibliogram)
						option Right (Instagram)

					+checkbox("display_alt", "Display alt text inline", "Display", false, true)

				//- div
					//- Here are all the possible input styles. Uncomment to test styling.
					- let i = 2
					- let id = 0
					- let thisID
					while --i >= 0
						fieldset
							legend Style demo
							.field-row
								- thisID = "in"+(id++)
								label.description(for=thisID) Placeholder
								input(type="text" placeholder="Placeholder" id=thisID)

							.field-row
								- thisID = "in"+(id++)
								label.description(for=thisID) Disabled
								input(type="text" disabled placeholder="Disabled" value="Value" id=thisID)

							.field-row
								label.description Button
								button(type="button") Button

							.field-row
								- thisID = "in"+(id++)
								label.description(for=thisID) Select
								select(id=thisID)
									option Select
									option Yes
									option No
									option Always
									option Never

							.field-row.checkbox-row
								- thisID = "in"+(id++)
								label.description(for=thisID) Checkbox
								input.checkbox(type="checkbox" id=thisID)
								label.pill(for=thisID tabindex=0 onkeypress=`[" ", "Enter"].includes(event.key) && this.click()`) Label
									span.fake-checkbox

				.action-container
					a(href="/").home-link ← Home
					button(type="submit").save-button Save settings