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

{% block body %}
<div class="setup-container" style="display: flex; gap: 0px; align-items: flex-start; margin-left: 100px;">
	
	<div class="forms-column" style="flex: 1; min-width: 300px;">

		<section class="setup-section">
			<h2>Add Board</h2>
			<form id="addBoardForm" action="/test-bench-setup/add-board" method="POST" class="account-input">
				
				<label style="display:block; margin-bottom:5px; font-weight:600;">Board Family:</label>
				<select name="board_id" style="display: block; margin-bottom: 10px; min-width: 250px; background-color: var(--bg-surface); color: var(--text-main); border: 1px solid var(--border); padding: 5px; border-radius: 6px;" required>
					<option value="" disabled selected>Select a Board</option>
					{% for board in boards %}
					<option value="{{ board.board_id }}">{{ board.family.board_family_prefix }}{{ board.board_name }}</option>
					{% endfor %}
				</select>
				
				<input type="text" id="mac_addr" name="mac_addr" placeholder="MAC Address" required>

				<div id="mac_err" class="error-text"></div>

				<button type="submit">Add Test Board</button>
			</form>
		</section>
	</div>

	<div class="table-column" style="flex: 2;">
		<h2>Test Units</h2>
		<table style="width: 100%; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; background-color: var(--bg-surface);">
			<thead>
				<tr style="background-color: var(--bg-active); border-bottom: 1px solid var(--border);">
					<th style="padding: 12px; text-align: left;">Board</th>
					<th style="padding: 12px; text-align: left;">MAC Address</th>
					<th style="padding: 12px; text-align: left;">OS</th>
					<th style="padding: 12px; text-align: center; width: 1%; white-space: nowrap;">Delete</th>
				</tr>
			</thead>
			<tbody>
				{% for test_unit in test_boards %}
				<tr style="border-bottom: 1px solid var(--border);">

					<td style="padding: 12px; text-align: left; font-weight: 600; color: var(--text-muted);">
						{{ test_unit.board.family.board_family_prefix }}{{ test_unit.board.board_name }}
					</td>

					<td style="padding: 12px; text-align: left; font-weight: 600; color: var(--text-muted);">
						{{ test_unit.mac_addr }}
					</td>

					<td style="padding: 12px; text-align: left; font-weight: 600; color: var(--text-muted);">

						<form action="/test-bench-setup/update-os/{{ test_unit.testboard_id }}" method="POST">
							<select name="os_id" onchange="this.form.submit()">
								<option value="0">No OS installed</option>
								{% for os in operating_systems %}
								<option value="{{ os.os_id}}" {% if os.os_id == test_unit.os.os_id %} selected {% endif %}>
									{{ os.os_name }}
								</option>
								{% endfor %}
							</select>
						</form>
					</td>

					<td>
						<form action="/test-bench-setup/delete-test-board/{{ test_unit.testboard_id }}" method="POST">
							<button type="submit">X</button>
						</form>
					</td>
				
				</tr>
				{% else %}
				<tr>
					<td colspan="1" style="padding: 20px; text-align: center; color: var(--text-muted);">No products registered yet. Add one on the left.</td>
				</tr>
				{% endfor %}
			</tbody>
		</table>
	</div>
</div>
{% endblock %}




{% block scripts %}

<script src="{{ url_for('static', filename='utils/validation.js') }}"></script>


<script>

	addBoardForm.addEventListener('submit', function(event) {

		const mac_input = mac_addr.value;

		const is_valid = validation.mac_addr(mac_input);

		if (is_valid === false) {

			event.preventDefault();
			const err_msg = "Error: MAC address input is not valid";
			console.error(err_msg);
			mac_err.textContent = err_msg
		}

	});


</script>


{% endblock %}