<%~ include("partials/base_head.eta", {"title": "API Test"}) %>
<%~ include("partials/nav.eta") %>

<section class="hero is-primary" id="heroStatus">
	<div class="hero-body">
		<p class="title" data-tK="start-hero-header-welcome">Test Page</p>
		<p class="subtitle" data-tK="start-hero-header-subtitle-default" id="heroExplainer">API Integration test page</p>
	</div>
</section>
<section class="section">
	<h1 class="title" data-tK="start-sysinfo-header">Singelton Query</h1>
	<nav class="level">
		<div class="level-item has-text-centered">
			<div>
				<p class="heading">Kontakte</p>
				<p class="title"><span data-dataSource="AlertContacts" data-dataAction="COUNT" class="is-skeleton">Load.</span></p>
			</div>
		</div>
		<!--<div class="level-item has-text-centered">
			<div>
				<p class="heading">Alarme</p>
				<p class="title"><span data-dataSource="Alerts" data-dataCol="id" data-dataAction="COUNT" class="is-skeleton">Load.</span></p>
			</div>
		</div>-->
		<div class="level-item has-text-centered">
			<div>
				<p class="heading">Version</p>
				<p class="title"><span data-dataSource="version" data-dataAction="SPECIAL" class="is-skeleton">Load.</span></p>
			</div>
		</div>
	</nav>
</section>


<section class="section">
<h1 class="title" data-tK="start-sysinfo-header">File test</h1>
<form method="put" action="/api/upload" enctype="multipart/form-data" id="uploadForm">
	<div class="field">
		<label class="label">File</label>
		<div class="control">
			<input class="input" type="file" name="file" id="file">
		</div>
	</div>
	<!-- URL field -->
	<div class="field">
		<label class="label">URL</label>
		<div class="control">
			<input class="input" type="text" name="url" id="url">
		</div>
	<div class="field is-grouped">
		<div class="control">
			<input type="submit" class="button is-link" value="Upload" data-actionBtn="upload">
		</div>
	</div>
	<script>
		document.getElementById("url").addEventListener("input", function() {
			document.getElementById("uploadForm").action = document.getElementById("url").value;
		});
	</script>
</form>
</section>

<!-- TODO: Mark required fields as required; add handling for validation -->
<div id="modal-js-example" class="modal">
	<div class="modal-background"></div>

	<div class="modal-content">
		<div class="box entryPhase is-hidden">
			<h2 class="title">New Contact</h1>

				<i class="bi bi-arrow-clockwise title"></i>
		</div>
		<div class="box entryPhase">
		
			<form data-targetTable="AlertContacts">
			<h2 class="title">New Contact</h1>
			<div class="field">
				<label class="label">Name</label>
				<div class="control has-icons-left">
					<input class="input" type="text" placeholder="John Doe" value="" name="name">
					<span class="icon is-small is-left">
					<i class="bi bi-file-earmark-person-fill"></i>
					</span>
				</div>
			</div>

			<div class="field">
			<label class="label">Telephone</label>
			<div class="control has-icons-left">
				<input class="input" type="text" placeholder="+49 1234 5678912" value="" name="phone">
				<span class="icon is-small is-left">
				<i class="bi bi-telephone-fill"></i>
				</span>
			</div>
			</div>

			<div class="field">
			<label class="label">Comment</label>
			<div class="control has-icons-left">
				<input class="input" type="text" placeholder="" value="" name="comment">
				<span class="icon is-small is-left">
				<i class="bi bi-chat-fill"></i>
				</span>
			</div>
			</div>
			<br>

			<div class="field is-grouped">
			<div class="control">
				<input type="submit" class="button is-link" value="Save" data-actionBtn="save">
			</div>
			<!--<div class="control">
				<button type="button" class="button is-link is-light" data-actionBtn="cancel">Cancel</button>
			</div>-->
			</div>
		</form>
			
			
		</div>
	</div>

	<button class="modal-close is-large" aria-label="close"></button>
	</div>


	<button class="js-modal-trigger button" data-target="modal-js-example">
	Create new Contact
	</button>

<section class="section">
	<h1 class="title" data-tK="start-recent-header">Alarm Kontakte</h1>
	<input class="input" type="text"  data-searchTargetId="contactTable" placeholder="Search..." />
	<table class="table is-striped is-fullwidth is-hoverable" data-dataSource="AlertContacts" id="contactTable" data-pageSize="5">
		<thead>
			<tr>
				<th data-dataCol = "id"><abbr title="Position">Pos</abbr></th>
				<th data-dataCol = "name">Name</th>
				<th data-dataCol = "phone">Telefon Nummer</th>
				<th data-dataCol = "comment">Kommentar</th>
				<th data-fnc="actions" data-actions="edit,delete">Aktionen</th>
			</tr>
		</thead>
		<tbody>
		</tbody>
		
	</table>
	<nav class="pagination is-hidden" role="navigation" aria-label="pagination" data-targetTable="contactTable">
		<ul class="pagination-list">
			
		</ul>
		</nav>
</section>

<%~ include("partials/footer.eta") %>
<%~ include("partials/base_foot.eta") %>