<?php require_once "atp.header.php"; ?>

<section class="content-wrapper" data-heading="settings" id="settings">
	<!--Heading-->
	<div class="page-title">
		<h1>System Settings</h1>
		<p></p>
	</div>
	
	<!--Input Count-->
	<div class="box top-wrapper">
		<fieldset>
			<legend>
				<h2>Active Inputs</h2>
				<div class="tooltip">
					<p>
						Set the maximum number of Inputs available for configuration
					</p>
				</div>
			</legend>
			<div class="flex-row">
				<div class="flex-half">
					<div class="flex-heading">
						<h2>Speed Inputs:</h2>
					</div>
					<select id="speed-number-select"></select>
				</div>
				<div class="flex-half">
					<div class="flex-heading">
						<h2>Depth Inputs:</h2>
					</div>
					<select id="depth-number-select"></select>
				</div>
			</div>
			<div class="flex-row">
				<div class="flex-half">
					<div class="flex-heading">
						<h2>Wind Inputs:</h2>
					</div>
					<select id="wind-number-select"></select>
				</div>
			</div>
            <div class="flex-row">
				<div class="flex-half">
					<div class="flex-heading">
						<h2>Heading Inputs:</h2>
					</div>
					<select id="heading-number-select"></select>
				</div>
                <div class="flex-half">
					<div class="flex-heading">
						<h2>Position Inputs:</h2>
					</div>
					<select id="position-number-select"></select>
				</div>
			</div>
		</fieldset>
	</div>
	
	<!--Buttons-->
	<div class="button-box" id="button-container">
		<div class="box">
			<a id="ok-button" class="button button-gray button-medium">OK</a>
			<a id="cancel-button" class="button button-gray button-medium">Cancel</a>
			<a id="apply-button" class="button button-gray button-medium">Apply</a>
		</div>
	</div>
</section>

<script type="text/javascript" src="js/atp.settings.js?v=<?php echo VERSION_NUMBER?>" defer></script>
<script>
$(document).ready(function() {
	let model = new SettingsModel();
	let controller = new SettingsController(model);
	let view = new SettingsView(controller);
});
</script>

<?php require_once "footer.php"?>