<div class="ConfigSwitchers">
	<button class="ConfigSwitchers-toggle" aria-expanded="false" aria-controls="config-switchers">
		<svg class="ConfigSwitchers-toggleOpen" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/></svg>
		<svg class="ConfigSwitchers-toggleClose" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" width="24" height="24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/></svg>
		<span id="config-switcher-label-open">Open Settings</span>
		<span id="config-switcher-label-close" hidden>Close Settings</span>
	</button>
	<script>
		{
			const configSwitcherToggle = document.querySelector(".ConfigSwitchers-toggle");
			const configSwitcherLabelOpen = document.getElementById("config-switcher-label-open");
			const configSwitcherLabelClose = document.getElementById("config-switcher-label-close");

			if (configSwitcherToggle) {
				configSwitcherToggle.addEventListener("click", () => {
					const shouldOpen = configSwitcherToggle.getAttribute("aria-expanded") === "false";

					configSwitcherToggle.setAttribute("aria-expanded", shouldOpen ? "true" : "false");
					configSwitcherLabelOpen.hidden = shouldOpen;
					configSwitcherLabelClose.hidden = !shouldOpen;
				});
			}
		}
	</script>
	<div class="ConfigSwitchers-container" id="config-switchers">
		<form class="ConfigSwitcher js-ThemeSwitcher">
			<fieldset class="ConfigSwitcher-wrapper">
				<legend class="ConfigSwitcher-title">Color scheme</legend>
				<div class="ConfigSwitcher-options">
					<div class="ConfigSwitcher-option">
						<input type="radio" name="theme" value="light" id="theme-light"{% if userUiConfig.theme == "light" %} checked{% endif %}>
						<label for="theme-light">
							<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-labelledby="theme-light-title"><title id="theme-light-title">light</title><path d="M24 12.2v.2c-.2.4-.6.7-1.2.8H21c-.6 0-1.1-.6-1.1-1.2 0-.7.5-1.2 1.2-1.2h1.8c.6 0 1 .3 1.2.9v.5zM11.8 24h-.2c-.4-.2-.7-.6-.8-1.2V21c0-.6.6-1.1 1.2-1.1.7 0 1.2.5 1.2 1.2v1.8c0 .6-.3 1-.9 1.2h-.5zM12.2 0h.2c.4.2.7.6.8 1.2V3c0 .6-.6 1.1-1.2 1.1-.7 0-1.2-.5-1.2-1.1V1.2c0-.6.3-1 .9-1.1V0h.5zM0 11.8v-.2c.2-.4.6-.7 1.2-.8H3c.6 0 1.1.6 1.1 1.2 0 .7-.5 1.2-1.1 1.2H1c-.4 0-.8-.3-1-.8l-.1-.2v-.4zM12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12zM4.4 20.9c-.6 0-1-.3-1.1-.7-.2-.5-.2-.9.1-1.2L5 17.3c.4-.4 1-.3 1.5.1.4.4.5 1 0 1.5l-1.4 1.6-.7.3zM3.2 4.3c0-.4.2-.8.6-1 .5-.2.9-.2 1.3.1L6.6 5c.4.4.3 1-.1 1.5-.4.4-1.1.5-1.5 0L3.4 5.2l-.3-.7zM19.6 3.2c.5 0 .9.2 1.1.6.2.5.2 1-.1 1.3L19 6.6c-.4.4-1 .3-1.5 0-.4-.5-.5-1.2 0-1.6l1.4-1.6.7-.3zM20.9 19.6c0 .5-.3.9-.7 1.1-.4.2-.9.2-1.2-.1L17.4 19c-.4-.4-.3-1 .1-1.5.4-.4 1.1-.5 1.5 0 .6.4 1 1 1.6 1.5l.3.6z"/></svg>
						</label>
					</div>
					<div class="ConfigSwitcher-option">
						<input type="radio" name="theme" value="dark" id="theme-dark"{% if userUiConfig.theme == "dark" %} checked{% endif %}>
						<label for="theme-dark">
							<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-labelledby="theme-dark-title"><title id="theme-dark-title">dark</title><path d="M17.2 18.4c1.9 0 3.6-.5 5.3-1.5.3-.2.5-.2.7 0 .2.1.2.4 0 .7-2 3.5-5 5.6-9 6.2A12.1 12.1 0 0 1 9.4.2c.4-.1.7 0 .8.2.2.2.1.5-.1.8a10.1 10.1 0 0 0 5.2 17l2 .2z"/></svg>
						</label>
					</div>
					<div class="ConfigSwitcher-option">
						<input type="radio" name="theme" value="auto" id="theme-auto"{% if userUiConfig.theme == "auto" %} checked{% endif %}>
						<label for="theme-auto">
							<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-labelledby="theme-auto-title"><title id="theme-auto-title">auto</title><path d="M24 2.3v14.5c-.3 1-1 1.2-1.7 1.2H1.5c-.3 0-.7-.1-1-.4-.3-.2-.4-.5-.5-.8V2.3c.2-.8.9-1.1 1.7-1.1h21c.4 0 .7.1 1 .5l.3.6z"/><path class="st0" d="M8.3 21.4H4.6c-.5 0-.8.3-.8.7 0 .4.3.7.8.7h14.8c.5 0 .8-.3.8-.7 0-.4-.3-.7-.8-.7h-3.7v-2H8.3v2z"/><path d="M8.3 21.4v-2h7.4v2H19.4c.5 0 .8.3.8.7 0 .4-.3.7-.8.7H4.6c-.5 0-.8-.3-.8-.7 0-.4.3-.7.8-.7h3.7z"/></svg>
						</label>
					</div>
				</div>
			</fieldset>
		</form>

		<form class="ConfigSwitcher js-TextDirectionSwitcher">
			<fieldset class="ConfigSwitcher-wrapper">
				<legend class="ConfigSwitcher-title">Text direction</legend>
				<div class="ConfigSwitcher-options">
					<div class="ConfigSwitcher-option">
						<input type="radio" name="text_direction" value="ltr" id="text-direction-ltr"{% if userUiConfig.componentTextDirection == "ltr" %} checked{% endif %}>
						<label for="text-direction-ltr">
							<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-labelledby="text-direction-ltr-title"><title id="text-direction-ltr-title">left to right</title><path d="M12 24c.5-.1.8-.5 1.2-.8l10-10c.4-.5.6-1 .4-1.7A10075.2 10075.2 0 0 0 12.8.5c-.6-.7-1.6-.7-2.2 0L9.2 1.8c-.7.7-.7 1.6 0 2.3l5.1 5.1.2.2H2c-.7 0-1.2.3-1.5 1l-.2.7V13c0 1 .7 1.7 1.7 1.7h12.5l-.2.2-5 5c-.6.6-.8 1.4-.4 2l2 2 .5.2h.6z"/><</svg>
						</label>
					</div>
					<div class="ConfigSwitcher-option">
						<input type="radio" name="text_direction" value="rtl" id="text-direction-rtl"{% if userUiConfig.componentTextDirection == "rtl" %} checked{% endif %}>
						<label for="text-direction-rtl">
							<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-labelledby="text-direction-rtl-title"><title id="text-direction-rtl-title">right to left</title><path d="M12 24c-.5-.1-.8-.5-1.2-.8l-10-10c-.4-.5-.6-1-.4-1.7 0-.2.2-.5.4-.6L11.2.5c.7-.7 1.6-.7 2.3 0l1.3 1.3c.7.7.7 1.6 0 2.3L9.7 9.2l-.2.2H22c.7 0 1.2.3 1.5 1l.2.7V13c0 1-.7 1.7-1.7 1.7H9.5l.2.2 5 5c.6.6.8 1.4.4 2l-2 2-.5.2H12z"/></svg>
						</label>
					</div>
				</div>
			</fieldset>
		</form>

		<form class="ConfigSwitcher js-DevelopmentModeSwitcher">
			<div class="ConfigSwitcher-wrapper">
				<label for="development-mode" class="ConfigSwitcher-title">Development mode</label>
				<div class="ConfigSwitcher-options">
					<div class="ConfigSwitcher-option">
						<input type="checkbox" name="mode" value="dev" id="development-mode"{% if userUiConfig.mode == "dev" %} checked{% endif %} switch>
					</div>
				</div>
			</div>
		</form>
	</div>
</div>
