mixin navbar_led(id, icon, cls="led-gray")
	img(id=id, class=cls src=`${svg_dir}/${icon}.svg`)


mixin menu_message(icon, short, classes="")
	.text
		table
			tr
				td(rowspan="2") #[img(class=`sign ${classes}` src=`${svg_dir}/${icon}.svg`)]
				td(style="line-height:1.5") #[b #{short}]
			if block
				tr
					td
						sup(style="line-height:1")
							block


mixin menu_switch_td2_gpio(channel, confirm_off="")
	td
		block
	td(align="right")
		.switch-box
			input(
				disabled
				type="checkbox"
				id=`__gpio-switch-${channel}`
				class=`__gpio-switch-${channel} gpio-switch`
				data-channel=channel
				data-confirm-off=confirm_off
			)
			label(for=`__gpio-switch-${channel}`)
				span.switch-inner
				span.switch


mixin menu_switch_td2(id, enabled, checked)
	td
		block
	td(align="right")
		.switch-box
			input(checked=checked disabled=!enabled type="checkbox" id=id)
			label(for=id)
				span.switch-inner
				span.switch


mixin menu_switch_table(id, enabled, checked)
	table.kv
		tr
			+menu_switch_td2(id, enabled, checked)
				block


mixin menu_radio_td2(name, items)
	td
		block
	td
		.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"]}


mixin menu_slider_td3(slider_id, value_id, enabled)
	-
		enabled = (enabled || true)
	td
		block
	td.value-slider
		input(type="range" id=slider_id disabled=!enabled)
	td.value-number(id=value_id)


mixin menu_spoiler(title)
	details
		summary !{title}
		div(class="spoiler")
			block


ul#navbar
	li.left
		a(id="logo" href=root_prefix) ←  
			img.svg-gray(src=`${svg_dir}/logo.svg` alt="π-kvm")

	include navbar-health.pug

	include navbar-system.pug
	include navbar-atx.pug
	include navbar-msd.pug
	include navbar-macro.pug
	include navbar-text.pug
	include navbar-shortcuts.pug
	include navbar-gpio.pug
	include navbar-switch.pug