<?php require_once "atp.header.php"; ?>
	
<section class="content-wrapper" data-heading="display" id="garmin">
	<!--Heading-->
	<div class="page-title">
		<h1>
            Garmin Custom Data
            <div class="slider-container">
                <label class="switch" for="checkbox">
                    <input type="checkbox" id="checkbox">
                    <div class="slider round"></div>
                </label>
            </div>
        </h1>
		<p>

		</p>
	</div>

	<!--User Data Selection-->
	<div id="user-data-container" class="box top-wrapper">
		<div></div>
        <h2>Field</h2>
        <h2>Sender</h2>
        <h2>Instance</h2>
		<h2>Name</h2>
        <h2>Format</h2>
        <h2>Enable</h2>
	</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.garmin-user-data.js" defer></script>
<script>
$(document).ready(function() {
	var model = new GarminUserModel();
	var controller = new GarminUserController(model);
	var view = new GarminUserView(controller);
});
</script>

<?php require_once "footer.php"; ?>
