//- Needs constants, settings, csrf, status, message
- const ll = lang.get(settings.language)

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

mixin input(id, description, placeholder, disabled, list)
	.field-row
		label.description(for=id)= description
		input(type="text" id=id name=id value=settings[id] placeholder=placeholder disabled=disabled list=`${id}-list`)
		if list
			datalist(id=`${id}-list`)
				each item in list
					option(value=item)

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= `${ll.t_settings} | Bibliogram`
		include includes/head
		script(src=getStaticURL("html", "/static/js/settings_message.js") type="module")
	body.settings-page
		if status && message
			.status-notice(class=status)= message
		main.settings
			form(action=returnAction method="post" enctype="application/x-www-form-urlencoded")
				input(type="hidden" name="csrf" value=csrf)

				h1.title= ll.t_settings

				+fieldset(ll.t_features)
					+select("language", ll.t_language, false, [
						{value: "ar", text: "اَلْعَرَبِيَّةُ‎"},
						{value: "bg", text: "Български"},
						{value: "de", text: "Deutsch"},
						{value: "en", text: "English (International)"},
						{value: "en-us", text: "English (US)"},
						{value: "es", text: "Español"},
						{value: "fa", text: "فارسي"},
						{value: "fr", text: "Français"},
						{value: "gl", text: "Galego"},
						{value: "it", text: "Italiano"},
						{value: "ms", text: "Bahasa Melayu"},
						{value: "pl", text: "Polski"},
						{value: "ru", text: "Русский"},
						{value: "tr", text: "Türkçe"}
					])

					+select("save_data", ll.save_data, true, [
						{value: "automatic", text: ll.t_automatic},
						{value: "off", text: ll.t_off},
						{value: "lazy_load", text: ll.lazy_load},
						{value: "full", text: ll.t_full}
					])

					+input("rewrite_youtube", ll.rewrite_youtube, constants.default_user_settings.rewrite_youtube, false, [
						"invidio.us",
						"invidious.snopyta.org",
						"invidious.13ad.de",
						"watch.nettohikari.com",
						"invidious.fdn.fr",
						"yewtu.be"
					])

					+input("rewrite_twitter", ll.rewrite_twitter, constants.default_user_settings.rewrite_twitter, false, [
						"nitter.net",
						"nitter.snopyta.org",
						"nitter.pussthecat.org",
						"nitter.42l.fr",
						"nitter.mastodont.cat",
						"nitter.tedomum.net",
						"nitter.cattube.org",
						"nitter.fdn.fr",
						"nitter.1d4.us"
					])

					+checkbox("remove_trailing_hashtags", ll.remove_trailing_hashtags, ll.t_hide, false)

					+checkbox("link_hashtags", ll.link_hashtags, ll.t_clickable, true)

					+checkbox("show_comments", ll.show_comments, ll.t_display, true)

					+checkbox("spa", ll.fast_navigation, ll.t_enabled, false)

					+select("infinite_scroll", ll.infinite_scroll, true, [
						{value: "normal", text: ll.t_normal},
						{value: "eager", text: ll.t_eager},
						{value: "off", text: ll.t_manual}
					])

				+fieldset(ll.t_appearance)
					+select("theme", ll.t_theme, false, constants.themes.collated.map(entry => ({value: entry.file, text: entry.name})))

					+checkbox("display_top_nav", ll.display_top_nav, ll.t_always, false)

					+select("timeline_columns", ll.timeline_columns, false, [
						{value: "dynamic", text: ll.t_dynamic},
						{value: "three", text: ll.three_columns},
						{value: "four", text: ll.four_columns},
						{value: "six", text: ll.six_columns}
					])

					+select("caption_side", ll.caption_side, false, [
						{value: "left", text: ll.left_caption},
						{value: "right", text: ll.right_caption}
					])

					+checkbox("display_alt", ll.display_alt_text, ll.t_display, false)

				//- 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

				if token
					p!= ll.pug_restore_sync_settings({token})

				.action-container
					span.home-link-container: a(href=returnURL).home-link= `← ${ll.t_return}`
					button(type="submit" formaction=stayAction).save-button= ll.t_save
					button(type="submit").save-button= ll.save_and_return