	<html>
	<head>
	<title>Dashboard</title>

	<!-- You MUST include jQuery before Fomantic -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.8/semantic.min.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.8/semantic.min.js"></script>

	<script src="https://unpkg.com/htmx.org@1.7.0"></script>
	</head>
	<body>
	<div class="ui container">
	<h2>Dashboard</h2>


	<form id="gameform" class="ui form"
	hx-post="/game" hx-target="#gamelist"
	hx-swap="outerHTML">

	<div class="inline field">
	<label for="name">Game Name</label> <input id="name" name="name" type="text" value="">
	</div>


	<div class="field">
	<label for="json_string">JSON</label>
	<textarea cols="40" id="json_string" name="json_string" rows="10">
	</textarea>
	</div>


	<button class="ui button primary" type="submit">Add</button>

	</form>

	<form id="search_form">
	<div>
	<h3>
	Search Games
	<span class="htmx-indicator">
	<img src="/static/img/bars.svg"/> Searching...
	</span>
	</h3>
	<input class="form-control" type="search"
	name="name" placeholder="Begin Typing To Search Games..."
	hx-get="/games"
	hx-trigger="keyup changed delay:500ms, search"
	hx-target="#gamelist"
	hx-indicator=".htmx-indicator"
	hx-include="#search_form">

	<div class="ui calendar" id="standard_calendar1"
	style="padding: 50px; display: inline-block;">
	<div class="ui input left icon">
	<i class="calendar icon"></i>
	<input class="form-control" type="text"
	name="from_date" placeholder="Date"
	hx-get="/games"
	hx-trigger="keyup changed delay:500ms, search"
	hx-target="#gamelist"
	hx-indicator=".htmx-indicator"
	hx-include="#search_form">
	</div>
	</div>

	<div class="ui calendar" id="date_calendar2"
	style="padding: 50px; display: inline-block;">
	<div class="ui input left icon">
	<i class="calendar icon"></i>
	<input class="form-control" type="text"
	name="to_date" placeholder="Date"
	hx-get="/games"
	hx-trigger="keyup changed delay:500ms, search"
	hx-target="#gamelist"
	hx-indicator=".htmx-indicator"
	hx-include="#search_form">
	</div>
	</div>

	</div>
	</form>
	<script>
	$('.calendar')
	.calendar({
	type: 'date',
	formatter: {
	date: function (date, settings) {
	if (!date) return '';
	var day = date.getDate() + '';
	if (day.length < 2) {
	day = '0' + day;
	}
	var month = (date.getMonth() + 1) + '';
	if (month.length < 2) {
	month = '0' + month;
	}
	var year = date.getFullYear();
	return year + '-' + month + '-' + day;
	}
	},
	onChange: function(date, text) {
	e = htmx.find(this, "input");
	htmx.trigger(e, "search", {});
	}
	})
	;
	</script>

	<table class="ui celled table" id="gamelist">
	<thead>
	<tr><th>Game Name</th>
	<th>Date</th>
	<th>Json</th>
	</tr></thead>
	<tbody>

	<tr>
	<td data-label="Game Name">ball</td>
	<td data-label="Date">2022-03-22 11:27:49.287325</td>
	<td data-label="Json"> { "one": "two", "three": "four" } </td>
	</tr>

	<tr>
	<td data-label="Game Name">ball1</td>
	<td data-label="Date">2022-03-30 09:24:34.193407</td>
	<td data-label="Json">{'one': 'two', 'three': 'four'}</td>
	</tr>

	<tr>
	<td data-label="Game Name">ball10</td>
	<td data-label="Date">2022-04-13 10:41:48.280260</td>
	<td data-label="Json">null</td>
	</tr>

	<tr>
	<td data-label="Game Name">ball11</td>
	<td data-label="Date">2022-04-13 10:42:59.414518</td>
	<td data-label="Json">null</td>
	</tr>

	<tr>
	<td data-label="Game Name">ball12</td>
	<td data-label="Date">2022-04-13 10:45:08.599619</td>
	<td data-label="Json">"{'one': '1111', 'two': '2222'}"</td>
	</tr>

	<tr>
	<td data-label="Game Name">ball13</td>
	<td data-label="Date">2022-04-13 10:50:22.361815</td>
	<td data-label="Json">"{'one': '1111', 'two': '2222'}"</td>
	</tr>

	<tr>
	<td data-label="Game Name">ball14</td>
	<td data-label="Date">2022-04-13 10:50:41.574278</td>
	<td data-label="Json">"{'one': '1111', 'two': \"222\"}"</td>
	</tr>

	<tr>
	<td data-label="Game Name">ball15</td>
	<td data-label="Date">2022-04-13 10:51:11.869711</td>
	<td data-label="Json">"{'one': '1111', \"two\": \"222\"}"</td>
	</tr>

	<tr>
	<td data-label="Game Name">ball16</td>
	<td data-label="Date">2022-04-13 10:51:45.294163</td>
	<td data-label="Json">"{'one': '1111', \"two\": \"222\",}"</td>
	</tr>

	<tr>
	<td data-label="Game Name">ball17</td>
	<td data-label="Date">2022-04-13 10:52:16.831554</td>
	<td data-label="Json">"{'one': '1111', \"two\": \"222\", three}"</td>
	</tr>

	<tr>
	<td data-label="Game Name">ball18</td>
	<td data-label="Date">2022-04-21 10:30:19.116018</td>
	<td data-label="Json">{ "one": "two", "three": "four" }</td>
	</tr>

	<tr>
	<td data-label="Game Name">ball19</td>
	<td data-label="Date">2022-04-21 10:31:26.878780</td>
	<td data-label="Json">{ "one": "two", "three": "four" }
	</td>
	</tr>

	<tr>
	<td data-label="Game Name">ball2</td>
	<td data-label="Date">2022-03-30 10:09:36.704377</td>
	<td data-label="Json">{'one': 'two', 'three': 'four'}</td>
	</tr>

	<tr>
	<td data-label="Game Name">ball20</td>
	<td data-label="Date">2022-05-09 08:53:18.954406</td>
	<td data-label="Json">{ "one": "two", "three": "four" }</td>
	</tr>

	<tr>
	<td data-label="Game Name">ball21</td>
	<td data-label="Date">2022-05-09 09:04:17.805816</td>
	<td data-label="Json">{ "one": "two", "three": "four" }</td>
	</tr>

	<tr>
	<td data-label="Game Name">ball22</td>
	<td data-label="Date">2022-05-09 09:05:54.234604</td>
	<td data-label="Json">{ "one": "two", "three": "four" }</td>
	</tr>

	<tr>
	<td data-label="Game Name">ball23</td>
	<td data-label="Date">2022-05-09 09:09:38.940094</td>
	<td data-label="Json">{ "one": "two", "three": "four" }</td>
	</tr>

	<tr>
	<td data-label="Game Name">ball24</td>
	<td data-label="Date">2022-05-09 09:25:23.166437</td>
	<td data-label="Json">{ "one": "two", "three": "four" }</td>
	</tr>

	<tr>
	<td data-label="Game Name">ball25</td>
	<td data-label="Date">2022-05-09 10:17:51.376314</td>
	<td data-label="Json">{ "one": "two", "three": "four" }</td>
	</tr>

	<tr>
	<td data-label="Game Name">ball3</td>
	<td data-label="Date">2022-03-30 10:10:13.727200</td>
	<td data-label="Json">{'one': 'two', 'three': 'four'}</td>
	</tr>

	<tr>
	<td data-label="Game Name">ball4</td>
	<td data-label="Date">2022-03-30 10:12:57.204300</td>
	<td data-label="Json">{'one': 'two', 'three': 'four'}</td>
	</tr>

	<tr>
	<td data-label="Game Name">ball5</td>
	<td data-label="Date">2022-03-30 10:15:04.643457</td>
	<td data-label="Json">{'one': 'two', 'three': 'four'}</td>
	</tr>

	<tr>
	<td data-label="Game Name">ball6</td>
	<td data-label="Date">2022-03-30 10:17:13.342929</td>
	<td data-label="Json">{'one': 'two', 'three': 'four'}</td>
	</tr>

	<tr>
	<td data-label="Game Name">ball7</td>
	<td data-label="Date">2022-03-30 10:43:25.982576</td>
	<td data-label="Json">{"one": "two", "three": "four"}</td>
	</tr>

	<tr>
	<td data-label="Game Name">ball8</td>
	<td data-label="Date">2022-03-30 10:43:32.313067</td>
	<td data-label="Json">{"one": "two", "three": "four"}</td>
	</tr>

	<tr>
	<td data-label="Game Name">ball9</td>
	<td data-label="Date">2022-03-30 11:15:49.100881</td>
	<td data-label="Json">{"one": "two", "three": "four"}</td>
	</tr>

	<tr>
	<td data-label="Game Name">basketball</td>
	<td data-label="Date">2022-03-23 13:02:20.207045</td>
	<td data-label="Json">{'one': '1111', 'two': '2222'}</td>
	</tr>

	<tr>
	<td data-label="Game Name">basketball1</td>
	<td data-label="Date">2022-03-23 13:04:47.398055</td>
	<td data-label="Json">{'one': '1111', 'two': '2222'}</td>
	</tr>

	<tr>
	<td data-label="Game Name">basketball2</td>
	<td data-label="Date">2022-03-23 13:08:46.442410</td>
	<td data-label="Json">{'one': '1111', 'two': '2222'}</td>
	</tr>

	<tr>
	<td data-label="Game Name">basketball3</td>
	<td data-label="Date">2022-03-23 13:10:24.562590</td>
	<td data-label="Json">{'one': '1111', 'two': '2222'}</td>
	</tr>

	<tr>
	<td data-label="Game Name">basketball4</td>
	<td data-label="Date">2022-03-23 13:14:58.606044</td>
	<td data-label="Json">{'one': '1111', 'two': '2222'}</td>
	</tr>

	<tr>
	<td data-label="Game Name">basketball6</td>
	<td data-label="Date">2022-03-24 10:42:55.321355</td>
	<td data-label="Json">{'one': '1', 'two': '2'}</td>
	</tr>

	<tr>
	<td data-label="Game Name">basketball7</td>
	<td data-label="Date">2022-03-24 09:46:28.139774</td>
	<td data-label="Json">{"one":"111","two":"222"}</td>
	</tr>

	<tr>
	<td data-label="Game Name">basketball8</td>
	<td data-label="Date">2022-03-24 10:48:15.709027</td>
	<td data-label="Json">{"one":"1", "two":"2"}</td>
	</tr>

	<tr>
	<td data-label="Game Name">basketball9</td>
	<td data-label="Date">2022-03-25 13:45:10.702641</td>
	<td data-label="Json">{'one': '1111', 'two': '2222'}</td>
	</tr>

	<tr>
	<td data-label="Game Name">cricket</td>
	<td data-label="Date">None</td>
	<td data-label="Json">{ "games" : "2" }</td>
	</tr>

	<tr>
	<td data-label="Game Name">sn1</td>
	<td data-label="Date">2022-05-11 09:04:36.538187</td>
	<td data-label="Json">{"one": "two", "three": "four"}</td>
	</tr>

	<tr>
	<td data-label="Game Name">snowball</td>
	<td data-label="Date">2022-03-22 11:49:57.688538</td>
	<td data-label="Json">{'one': 'two', 'three': 'four'}</td>
	</tr>

	<tr>
	<td data-label="Game Name">snowball1</td>
	<td data-label="Date">2022-03-23 11:54:53.897853</td>
	<td data-label="Json">{'one': 'two', 'three': 'four'}</td>
	</tr>

	<tr>
	<td data-label="Game Name">snowball2</td>
	<td data-label="Date">2022-03-23 11:57:19.687378</td>
	<td data-label="Json">{'one': 'two', 'three': 'four'}</td>
	</tr>

	<tr>
	<td data-label="Game Name">snowball3</td>
	<td data-label="Date">2022-03-23 11:58:27.794792</td>
	<td data-label="Json">{'one': 'two', 'three': 'four'}</td>
	</tr>

	<tr>
	<td data-label="Game Name">snowball4</td>
	<td data-label="Date">2022-03-23 12:46:39.359198</td>
	<td data-label="Json">{'one': 'two', 'three': 'four'}</td>
	</tr>

	<tr>
	<td data-label="Game Name">snowball5</td>
	<td data-label="Date">2022-03-23 12:50:02.051641</td>
	<td data-label="Json">{'one': 'two', 'three': 'four'}</td>
	</tr>

	<tr>
	<td data-label="Game Name">snowball6</td>
	<td data-label="Date">2022-03-23 12:50:17.741430</td>
	<td data-label="Json">{'one': 'two', 'three': 'four'}</td>
	</tr>

	<tr>
	<td data-label="Game Name">snowball7</td>
	<td data-label="Date">2022-03-23 12:52:10.190936</td>
	<td data-label="Json">{'one': 'two', 'three': 'four'}</td>
	</tr>

	<tr>
	<td data-label="Game Name">snowball8</td>
	<td data-label="Date">2022-03-23 12:53:48.613196</td>
	<td data-label="Json">{'one': 'two', 'three': 'four'}</td>
	</tr>

	</tbody>
	</table>
	<script>

	</script>

	</div>
	<div id="error"></div>

	<script>
	document.body.addEventListener('htmx:beforeSwap', function(evt) {
	if(evt.detail.xhr.status === 404){
	// alert the user when a 404 occurs (maybe use a nicer mechanism than alert())
	alert("Error: Could Not Find Resource");
	} else if(evt.detail.xhr.status === 500){
	alert("Error:" + evt.detail.xhr.responseText);
	} else if(evt.detail.xhr.status === 422){
	alert("Error: Form Error");
	// allow 422 responses to swap as we are using this as a signal that
	// a form was submitted with bad data and want to rerender with the
	// errors
	//
	// set isError to false to avoid error logging in console
	evt.detail.shouldSwap = true;
	evt.detail.isError = false;
	evt.detail.target = htmx.find("#gameform");
	} else if(evt.detail.xhr.status === 418){
	// if the response code 418 (I'm a teapot) is returned, retarget the
	// content of the response to the element with the id `teapot`
	evt.detail.shouldSwap = true;
	evt.detail.target = htmx.find("#teapot");
	}
	});
	document.body.addEventListener('htmx:configRequest', function(evt) {
	const errors = document.querySelectorAll('.errors');
	errors.forEach(e => {
	e.remove();
	});
	});

	</script>
	</body>
	</html>