<rml>
<head>
	<link type="text/rcss" href="rml.rcss"/>
	<link type="text/rcss" href="recomp.rcss"/>
	<title>Inventory</title>
	<style>
		body
		{
			width: 100%;
			height: 100%;
		}

		/* Hide the window icon. */
		div#title_bar div#icon
		{
			display: none;
		}
		.flex-grid {
			display: flex;
		}
		.col {
			flex: 1;
			text-align: center;
		}
	</style>
	<link type="text/template" href="config_menu/general.rml" />
	<link type="text/template" href="config_menu/controls.rml" />
	<link type="text/template" href="config_menu/graphics.rml" />
	<link type="text/template" href="config_menu/sound.rml" />
	<link type="text/template" href="config_menu/mods.rml" />
	<link type="text/template" href="config_menu/debug.rml" />
</head>
<body class="window">
	<!-- <handle move_target="#document"> -->
		<div id="window" class="rmlui-window" style="display:flex; flex-flow: column; background-color:rgba(0,0,0,0)" onkeydown="config_keydown">
			<div class="centered-page" onclick="close_config_menu_backdrop">
				<div class="centered-page__modal">
					<tabset class="tabs" id="config_tabset">
						<tab class="tab" autofocus id="tab_general">
							<div>General</div>
							<div class="tab__indicator"></div>
						</tab>
						<panel class="config" data-model="general_model">
							<template src="config-menu__general" />
						</panel>
						<tab class="tab" id="tab_controls">
							<div>Controls</div>
							<div class="tab__indicator"></div>
						</tab>
						<panel class="config" data-model="controls_model">
							<template src="config-menu__controls" />
						</panel>
						<tab class="tab" id="tab_graphics">
							<div>Graphics</div>
							<div class="tab__indicator"></div>
						</tab>
						<panel class="config" data-model="graphics_model">
							<template src="config-menu__graphics" />
						</panel>
						<tab class="tab" id="tab_sound">
							<div>Sound</div>
							<div class="tab__indicator"></div>
						</tab>
						<panel class="config" data-model="sound_options_model">
							<template src="config-menu__sound" />
						</panel>
						<tab class="tab" id="tab_mods">
							<div>Mods</div>
							<div class="tab__indicator"></div>
						</tab>
						<panel class="config">
							<template src="config-menu__mods" />
						</panel>
						<tab class="tab" data-model="debug_model" data-if="debug_enabled" id="tab_debug">
							<div>Debug</div>
							<div class="tab__indicator"></div>
						</tab>
						<panel class="config" data-model="debug_model">
							<template src="config-menu__debug" />
						</panel>
					</tabset>
					<div class="config__icon-buttons">
						<button
							class="icon-button"
							onclick="open_quit_game_prompt"
							id="config__quit-game-button"
						>
							<svg src="icons/Quit.svg" />
						</button>
						<button
							class="icon-button"
							onclick="close_config_menu"
							id="config__close-menu-button"
						>
							<svg src="icons/X.svg" />
						</button>
					</div>
				</div>
				<div
					class="centered-page__controls"
					data-model="nav_help_model"
				>
					<label>
						<span>Navigate</span>
						<span class="prompt-font-sm">{{nav_help__navigate}}</span>
					</label>
					<label>
						<span>Accept</span>
						<span class="prompt-font-sm">{{nav_help__accept}}</span>
					</label>
					<label>
						<span>Exit</span>
						<span class="prompt-font-sm">{{nav_help__exit}}</span>
					</label>
					<!-- <label><span style="font-family:promptfont;">&#x21F3;</span> Navigate</label>
					<label><span style="font-family:promptfont;">&#x21A7;</span> Accept</label> -->
				</div>
			</div>
		</div>
	<!-- </handle> -->
	<!-- <handle size_target="#document" style="position: absolute; width: 16dp; height: 16dp; bottom: 0px; right: 0px; cursor: resize;"></handle> -->
</body>
</rml>
