{% extends "base.html" %}
{% block title %}Test Bench Setup - Autotest{% endblock %}

{% block body %}
<div class="setup-container">

	<form action="/schedule-new-test" method="POST">

		<!-- project -->
		<div>
			<select id="proj" name="proj" onchange="oninput_proj();">
				<option selected disabled>Project</option>
				{% for proj in projects %}
				<option value="{{ proj }}">{{ proj }}</option>
				{% endfor %}
			</select>
		</div>

		<!-- version -->
		<div>
			<select id="ver" name="ver" onchange="oninput_ver();">
				<option selected disabled>Version</option>
			</select>
		</div>

		<!-- build -->
		<div>
			<select id="build" name="build">
				<option selected disabeld>Build</option>
			</select>
		</div>

		<!-- products / test boards -->
		<div>

			<table>

				<tr>
					<th></th>
					<th>Board Name</th>
					<th>Operating System</th>
					<th>MAC Address</th>
				</tr>

				{% for board in test_boards %}
				<tr>
					<td><input name="test-boards" type="checkbox" value="{{ board.testboard_id }}"></td>
					<td>{{ board.board.family.board_family_prefix }}{{ board.board.board_name }}</td>
					<td>{{ board.os.os_name }}</td>
					<td>{{ board.mac_addr }}</td>
				</tr>
				{% else %}
				<tr>
					<td colspan="4" style="padding: 20px; text-align: center; color: var(--text-muted);">No board have been added to the test bench.</td>
				</tr>
				{% endfor %}

			</table>

		</div>

		<!-- submit btn -->
		 <button type="submit">Schedule Test Run</button>

	</form>

</div>
{% endblock %}




{% block scripts %}

<style>

form div select {
	min-width: 100px;
}

</style>



<script>

const projects_json = {{ projects|tojson }};
const obj_selected = document.getElementById("proj");
const obj_ver = document.getElementById("ver");
const obj_build = document.getElementById("build");

function oninput_proj() {

	const selected_proj = obj_selected.value;
	const versions_list = projects_json[selected_proj];

	obj_ver.innerHTML = "";

	versions_list.forEach(function(version) {
		const option = document.createElement("option");
		option.value = version;
		option.textContent = version;
		obj_ver.appendChild(option);
	})

}


function oninput_ver() {


	// not implemented due to backend relying on internal coporate systems
	// this is outside the scope of this assignment

	// this will query the internal build archive to load a list of available builds

	obj_build.innerHTML = "";

	const versions_list = [
		"example_x.y_z_1",
		"example_x.y_z_2",
		"example_x.y_z_3",
		"example_x.y_z_4",
		"example_x.y_z_5",
		"example_x.y_z_6",
		"example_x.y_z_7",
		"example_x.y_z_8",
		"example_x.y_z_9",
	];

	let i = 1;
	versions_list.forEach(function(version) {
		const option = document.createElement("option");
		option.value = i; // example value
		option.textContent = version;
		obj_build.appendChild(option);
		i++;
	})

}


</script>


{% endblock %}