extends ../base.pug


mixin radio(name, items)
	.radio-box
		each item in items
			-
				let id = `${name}-${item["value"]}`
				let checked = (item["checked"] || false)
			input(type="radio" id=id name=name value=item["value"] checked=checked)
			label(for=id) !{item["title"]}


append vars
	-
		root_prefix = "../"
		title = "PiKVM Login"
		main_js = "login/main"
		css_list.push("window", "modal", "radio", "login/login")


block body
	form(action="javascript:void(0)")
		#login-box
			#login
				table
					tr
						td #[img.svg-gray#login-logo(src=`${svg_dir}/logo.svg` alt="π-kvm")]
						td
					tr
						td(colspan=2) #[hr]
					tr
						td Username: 
						td #[input#user-input(type="text" autocapitalize="off")]
					tr
						td Password: 
						td #[input#passwd-input(type="password" autocapitalize="off")]
					tr
						td 2FA code: 
						td #[input#code-input(type="text" placeholder="if enabled" autocomplete="off")]
					tr
						td(colspan=2) #[hr]
					tr
						td #[a(target="_blank" href="https://docs.pikvm.org/auth/#session-expiration") Remember me]: 
						td
							+radio("expire-radio", [
								{"title": "1h", "value": "3600"},
								{"title": "12h", "value": "43200"},
								{"title": "Forever", "value": "0", "checked": true},
							])
					tr
						td(colspan=2) #[hr]
					tr
						td
						td #[button.key#login-button Login]

	ul.footer
		li.left
			| This site is actively using JavaScript.#[br]
			| It doesn't contain ads, but is blocked by some ad filters.#[br]
			| Please turn it off to continue and reload the page.