mixin about_tab(name, title, checked=false)
	- let button_id = `about-tab-${name}-button`
	input(checked=checked type="radio" name="about-tab-button", id=button_id)
	label(for=button_id) #{title}
	div(class="tab")
		div(id=`about-${name}` class="code")
			if block
				block
			else
				span(class="code-comment") No data

div(id="about-window" class="window")
	div(class="window-header")
		div(class="window-grab" i18n="kvm_text1") About
		button(class="window-button-close") #[b ×]

	div(id="about")
		table
			tr
				td(class="logo")
					a(href="https://pikvm.org" target="_blank")
						img(class="svg-gray" src=`${svg_dir}/logo.svg` alt="PiKVM" height="40")
				td
					table
						tr #[td(colspan="2" class="title" i18n="index_title") The Open Source KVM over IP]
						tr
							td(colspan="2" class="copyright" i18n="copyright")
								| Copyright © 2018-2024 #[a(target="_blank" href="mailto:mdevaev@gmail.com") Maxim Devaev]
		br
		div(class="tabs-box")
			+about_tab("meta", "Meta", true)
			+about_tab("hardware", "Hardware")
			+about_tab("version", "Version")

			+about_tab("thanks", "Thanks")
				span(class="code-comment" i18n="kvm_text2")
					| // These kind people donated money to the PiKVM project#[br]
					| // and supported the work on it. We are very grateful#[br]
					| // for their help, and memorializing their names#[br]
					| // is the least we can do in gratitude.#[br]
					| // If you also want to support this project,#[br]
					| // you can donate on #[a(target="_blank" href="https://www.patreon.com/pikvm") Patreon]
					| or #[a(target="_blank" href="https://paypal.me/pikvm") Paypal].
		br
		p(class="text credits")
			a(target="_blank" href="https://pikvm.org") PiKVM Project
			|   |  
			a(target="_blank" href="https://docs.pikvm.org") Documentation
			|   |  
			a(target="_blank" href="https://pikvm.org/support") Support