From c041e74af8c69e8fb0680558e23dd7be542afcf6 Mon Sep 17 00:00:00 2001
From: Karan Jayachandra <karan.jayachandra@nxp.com>
Date: Fri, 25 Jul 2025 15:52:42 +0200
Subject: Working version

---
 app/templates/players.j2 | 51 +++++++++++++++++++++++++-----------------------
 1 file changed, 27 insertions(+), 24 deletions(-)

(limited to 'app/templates/players.j2')

diff --git a/app/templates/players.j2 b/app/templates/players.j2
index f10b0a9..4b9660e 100644
--- a/app/templates/players.j2
+++ b/app/templates/players.j2
@@ -18,30 +18,33 @@
             {% endfor %}
 			</div>
 			<h3>Controls</h3>
-			<section class="section">
-				<div class="column">
-					<button class="button is-dark is-responsive" 
-							hx-post="/reset_players">RESET!</button>
-				</div>
-				<div class="column">
-					<form method="POST" enctype="multipart/form-data" hx-post="/update_players">
-						<div id="file-js" class="file has-name is-fullwidth">
-						<label class="file-label">
-							<input class="file-input" type="file" name="players" />
-							<span class="file-cta">
-							<span class="file-icon">
-								<i class="fas fa-upload"></i>
-							</span>
-							<span class="file-label"> Choose a file… </span>
-							</span>
-							<span class="file-name"> No file uploaded </span>
-						</label>
-						<button class="button is-dark is-responsive">UPDATE!</button>
-						</div>
-					</form>
-				</div>
-				<footer class="container">{{ footer() }}</footer>
-			</section>
+			<div class="grid">
+				<button class="button is-dark is-responsive" 
+						hx-post="/reset_players">RESET!</button>
+			</div>
+			<h3>Player Update</h3>
+			<div class="grid">
+				<form method="POST" enctype="multipart/form-data" hx-post="/update_players">
+					<div id="file-js" class="file has-name is-fullwidth">
+					<label class="file-label">
+						<input class="file-input" type="file" name="players" />
+					</label>
+					<button class="button is-dark is-responsive">UPDATE!</button>
+					</div>
+				</form>
+			</div>
+			<footer class="container">{{ footer() }}</footer>
+			<script>
+				const fileInput = document.querySelector("#file-js input[type=file]");
+					if (fileInput !== null) {
+						fileInput.onchange = () => {
+						if (fileInput.files.length > 0) {
+							const fileName = document.querySelector("#file-js .file-name");
+							fileName.textContent = fileInput.files[0].name;
+						}
+					}
+				};
+			</script>
 		</main>
 	</body>
 </html>
\ No newline at end of file
-- 
cgit v1.3.1