bibliogram/src/site/pug/settings.pug

//- Needs saved, settings

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

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

mixin checkbox(id, description, label, disabled)
	.field-row.checkbox-row
		label.description(for=id)= description
		input.checkbox(type="checkbox" id=id name=id checked=(settings[id] !== 0) 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)
			each option in options
				option(value=option.value selected=(option.value === settings[id]))= option.text

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, [
						{value: "en", text: "English (International)"},
						{value: "en-us", text: "English (US)"}
					])

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

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

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

				+fieldset("Appearance")
					+select("theme", "Theme", true, [
						{value: "classic", text: "Classic"}
					])

					+checkbox("display_top_nav", "Display top bar", "Always", false)

					+select("timeline_columns", "Timeline columns", true, [
						{value: "dynamic", text: "Dynamic"},
						{value: "3", text: "3 columns"},
						{value: "4", text: "4 columns"},
						{value: "6", text: "6 columns"}
					])

					+select("caption_side", "Caption side", true, [
						{value: "left", text: "Left (Bibliogram)"},
						{value: "right", text: "Right (Instagram)"}
					])

					+checkbox("display_alt", "Display alt text inline", "Display", 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