From b581661c993095c43ad19540999ab21957d0e013 Mon Sep 17 00:00:00 2001
From: Karan Jayachandra <karan.jayachandra@nxp.com>
Date: Wed, 16 Oct 2024 16:20:13 +0200
Subject: Added guests funtionality

---
 templates/index.j2 | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

(limited to 'templates/index.j2')

diff --git a/templates/index.j2 b/templates/index.j2
index 40d0eb1..42fc43e 100644
--- a/templates/index.j2
+++ b/templates/index.j2
@@ -29,7 +29,18 @@
 			<p class="title">Games</p>
 			<div class="columns">
 				<div class="column">
-					<div class="select is-large">
+					<div class="field has-addons">
+						<div class="control">
+							<button class="button is-large is-responsive is-dark" style="text-align:center" hx-post="/decrement" hx-swap="outerHTML" hx-trigger="click" hx-target="#guests">-</button>
+						</div>
+						<div hx-get="/guests" hx-swap="outerHTML" hx-trigger="revealed"></div>
+						<div class="control">
+							<button class="button is-large is-responsive is-dark" style="text-align:center" hx-post="/increment" hx-swap="outerHTML" hx-trigger="click" hx-target="#guests">+</button>
+						</div>
+					</div>
+				</div>
+				<div class="column">
+					<div class="select is-large is-responsive">
 						<select name="type">
 							<option>10 Levels</option>
 							<option>8 Levels</option>
@@ -41,14 +52,14 @@
 					</div>
 				</div>
 				<div class="column">
-					<button class="button is-dark is-large" hx-post="/propose" hx-trigger="click" hx-target="#games" hx-include="[name='type']">Propose</button>
+					<button class="button is-dark is-large is-responsive" hx-post="/propose" hx-trigger="click" hx-target="#games" hx-include="[name='type']">Propose</button>
 				</div>
 				<div class="column"></div>
 				<div class="column">
-					<button class="button is-dark is-large" hx-post="/confirm" hx-trigger="click" hx-target="#games">Confirm</button>
+					<button class="button is-dark is-large is-responsive" hx-post="/confirm" hx-trigger="click" hx-target="#games">Confirm</button>
 				</div>
 				<div class="column">
-					<button class="button is-dark is-large" hx-post="/clear" hx-trigger="click" hx-target="#games">Clear</button>
+					<button class="button is-dark is-large is-responsive" hx-post="/clear" hx-trigger="click" hx-target="#games">Clear</button>
 				</div>
 			</div>
 			<div hx-post="/clear" hx-swap="outerHTML" hx-trigger="revealed"></div>
-- 
cgit v1.3.1