<!doctype html>

<html>

<head>
	<style>
		table.class-list {
			display: table;
			border-collapse: collapse;
			width: 100%;

		}

		table.class-list tr {
			display: table-cell;
			width: 25%;
		}

		table.class-list tr td {
			display: block;
			border: 1px solid black;
			height: 20px;
			padding-right: 2px;
			padding-left: 2px;
		}

		.light-red {
			background-color: rgb(255, 155, 155);
		}

		.light-blue {
			background-color: rgb(155, 155, 255);
		}

		.light-green {
			background-color: rgb(155, 255, 155);
		}

		.light-yellow {
			background-color: rgb(255, 255, 155);
		}


		.red {
			background-color: rgb(255, 112, 112);
		}

		.blue {
			background-color: rgb(112, 112, 255);
		}

		.green {
			background-color: rgb(112, 255, 112);
		}

		.yellow {
			background-color: rgb(255, 255, 112);
		}


		.dark-red {
			background-color: rgb(155, 55, 55);
		}

		.dark-blue {
			background-color: rgb(55, 55, 155);
		}

		.dark-green {
			background-color: rgb(55, 155, 55);
		}

		.dark-yellow {
			background-color: rgb(155, 155, 55);
		}


		.submit {
			width: 100%;
			height: 80px;
		}

		div.quick-buttons {
			display: flex;
			flex-wrap: wrap;
			width: 100%;
		}

		div.quick-buttons * {
			width: 25%;
			height: 30px;
			box-sizing: border-box;
		}
	</style>

	<script>
		function addPointsAndSumbit(team, points) {
			document.getElementById(team).click();
			document.getElementById('points').value = points;
			document.getElementById('admin-form').submit();
		}
	</script>
</head>

<body>
	<form id="admin-form" action="/update" method="post">
		<label for="user">User:</label><br>
		<input type="text" id="user" name="user" value="user"><br>
		<label for="pass">Password</label><br>
		<input type="password" id="password" name="pass" value=""><br><br>
		<br />
		<br />

		<input type="number" id="points" name="points" value="1">
		<label>Points</label>
		<br />
		<button type="button" onclick="document.getElementById('points').value *= -1">Negitave</button>


		<br />


		<table class="class-list">
			<tr class="red" onclick="document.getElementById('team1').click()">
				<td><input type="checkbox" id="team1" name="team" value="team1"
						onclick="document.getElementById('team1').click()">
					<label> Gray.fin.door</label></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr class="green" onclick="document.getElementById('team2').click()">
				<td> <input type="checkbox" id="team2" name="team" value="team2"
						onclick="document.getElementById('team2').click()">
					<label> Slythering</label></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr class="yellow" onclick="document.getElementById('team3').click()">
				<td> <input type="checkbox" id="team3" name="team" value="team3"
						onclick="document.getElementById('team3').click()">
					<label> Hooplefloof</label></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>

			<tr class="blue" onclick="document.getElementById('team4').click()">
				<td><input type="checkbox" id="team4" name="team" value="team4"
						onclick="document.getElementById('team4').click()">
					<label> Raverclawz</label></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
		</table>
		<br />
		<div class="quick-buttons">
			<button type="button" class="light-red" onclick="addPointsAndSumbit('team1', 1)">+1</button>
			<button type="button" class="light-green" onclick="addPointsAndSumbit('team2', 1)">+1</button>
			<button type="button" class="light-yellow" onclick="addPointsAndSumbit('team3', 1)">+1</button>
			<button type="button" class="light-blue" onclick="addPointsAndSumbit('team4', 1)">+1</button>

			<button type="button" class="light-red" onclick="addPointsAndSumbit('team1', 5)">+5</button>
			<button type="button" class="light-green" onclick="addPointsAndSumbit('team2', 5)">+5</button>
			<button type="button" class="light-yellow" onclick="addPointsAndSumbit('team3', 5)">+5</button>
			<button type="button" class="light-blue" onclick="addPointsAndSumbit('team4', 5)">+5</button>


			<button type="button" class="light-red" onclick="addPointsAndSumbit('team1', 10)">+10</button>
			<button type="button" class="light-green" onclick="addPointsAndSumbit('team2', 10)">+10</button>
			<button type="button" class="light-yellow" onclick="addPointsAndSumbit('team3', 10)">+10</button>
			<button type="button" class="light-blue" onclick="addPointsAndSumbit('team4', 10)">+10</button>
			
			
			
			<button type="button" class="light-red" onclick="addPointsAndSumbit('team1', 20)">+20</button>
			<button type="button" class="light-green" onclick="addPointsAndSumbit('team2', 20)">+20</button>
			<button type="button" class="light-yellow" onclick="addPointsAndSumbit('team3', 20)">+20</button>
			<button type="button" class="light-blue" onclick="addPointsAndSumbit('team4', 20)">+20</button>

			<div> </div>
			<div> </div>
			<div> </div>
			<div> </div>

			<button type="button" class="dark-red" onclick="addPointsAndSumbit('team1', -1)">-1</button>
			<button type="button" class="dark-green" onclick="addPointsAndSumbit('team2', -1)">-1</button>
			<button type="button" class="dark-yellow" onclick="addPointsAndSumbit('team3', -1)">-1</button>
			<button type="button" class="dark-blue" onclick="addPointsAndSumbit('team4', -1)">-1</button>

			<button type="button" class="dark-red" onclick="addPointsAndSumbit('team1', -5)">-5</button>
			<button type="button" class="dark-green" onclick="addPointsAndSumbit('team2', -5)">-5</button>
			<button type="button" class="dark-yellow" onclick="addPointsAndSumbit('team3', -5)">-5</button>
			<button type="button" class="dark-blue" onclick="addPointsAndSumbit('team4', -5)">-5</button>


			<button type="button" class="dark-red" onclick="addPointsAndSumbit('team1', -10)">-10</button>
			<button type="button" class="dark-green" onclick="addPointsAndSumbit('team2', -10)">-10</button>
			<button type="button" class="dark-yellow" onclick="addPointsAndSumbit('team3', -10)">-10</button>
			<button type="button" class="dark-blue" onclick="addPointsAndSumbit('team4', -10)">-10</button>
			
			
			<button type="button" class="dark-red" onclick="addPointsAndSumbit('team1', -20)">-20</button>
			<button type="button" class="dark-green" onclick="addPointsAndSumbit('team2', -20)">-20</button>
			<button type="button" class="dark-yellow" onclick="addPointsAndSumbit('team3', -20)">-20</button>
			<button type="button" class="dark-blue" onclick="addPointsAndSumbit('team4', -20)">-20</button>
		</div>
		<br />
		<input type="submit" id="submit_button" value="Submit" class="submit">
		<br />

		<table>
			<tr>
				<td> Gray.fin.door </td>
				<td> <%=team1.points.toLocaleString() %> </td></label>
			</tr>
			<tr>
				<td> Slythering </td>
				<td> <%=team2.points.toLocaleString() %> </td></label>
			</tr>
			<tr>
				<td> Hooplefloof </td>
				<td> <%=team3.points.toLocaleString() %> </td></label>
			</tr>
			<tr>
				<td> Raverclawz </td>
				<td> <%=team4.points.toLocaleString() %> </td></label>
			</tr>
		</table>
		<label for="maxpoints">MaxPoints</label>
		<input type="number" id="maxpoints" name="maxpoints" value="<%=maxpoints %>">
	</form>

</body>

</html>
