{{ define "admin-token-content" }}
{{ template "nav-sidebar" . }}
<div id="content">
{{ template "navbar-user" . }}
<section class="section dashboard-wrapper p-t-xxl">
	<div class="content is-medium">
		{{ if .IsRegistration }}
		<h1>Registration Tokens</h1>
		<p>This page list all of the registration tokens.  A registration token enables a client
		to authenticate itself and request a new authentication token from the Spokes server
		and configure a new tunnel.</p>
		{{ end }}
		{{ if .IsAPI }}
		<h1>API Tokens</h1>
		<p>This page list all of the API tokens that can be used for interacting with the Spokes
		server API.  These tokens are used for authenticating and created an administrative session
		with the server.</p>
		<p>Once a session is established the API can be used for automating many of the
		administrative functions available in the dashboard.</p>
		{{ end }}
	</div>
	<div class="columns">
		<div class="column is-offset-6-desktop is-6-desktop">
			<div class="buttons is-right">
				<a class="button is-light" 
					{{ if .IsRegistration }}href="/admin/token/registration/create"{{ end }}
					{{ if .IsAPI }}href="/admin/token/api/create"{{ end }} >
					<span class="icon is-small"><i class="fas fa-plus"></i></span>
					<span>Create Token</span>
				</a>
			</div>
		</div>
	</div>
	<!-- top page controls -->
	<div class="columns">
		<div class="column">
			<div class="buttons is-right">
				<a class="button is-light"
					{{ if .Prev }}href="/admin/token/registration?page={{ .PrevPage }}"{{ else }}disabled="disabled"{{ end }}>
					<span class="icon"><i class="fas fa-angle-left"></i></span>
					<span>Previous</span>
				</a>
				<a class="button is-light"
					{{ if .Next }}href="/admin/token/registration?page={{ .NextPage }}"{{ else }}disabled="disabled"{{ end }}>
					<span>Next</span>
					<span class="icon"><i class="fas fa-angle-right"></i></span>
				</a>
			</div>
		</div>
	</div>
	<table class="table is-fullwidth is-bordered">
		<thead class="grey">
			<tr>
				<th>Name</th>
				<th>Active</th>
				{{ if .IsRegistration }}<th>Expiration</th>{{ end }}
				<th>Updated</th>
				{{ if .IsRegistration }}<th>Limits</th>{{ end }}
				{{ if .IsRegistration }}<th>Tunnels</th>{{ end }}
				<th>Key</th>
			</tr>
		</thead>
		<tbody>
			{{ if eq (len .Keys) 0 }}
			<tr>
				<td colspan="{{ if .IsRegistration }}7{{ else }}4{{ end }}" class="content is-medium has-text-centered p-xxl">
					<h1>No tokens</h1>
				</td>
			</tr>
			{{ end }}
			{{ range $key := .Keys }}
			<tr>
				<td>{{ if len $key.Name }}{{ $key.Name }}{{ else }}--{{ end }}<br>
					<a style="color: inherit;" 
						href="/admin/token/edit?id={{ $key.ID.String }}"><i class="fas fa-edit"></i></a><br>
					
				</td>
				<td class="has-text-centered">
					{{ if $key.Active }}
					<i class="fas fa-check has-text-success"></i><br>
					{{ else }}
					<i class="fas fa-minus has-text-grey"></i>
					{{ end }}
				</td>
				{{ if $.IsRegistration }}
				<td>
					{{ if not $key.Expiration.IsZero }}
					{{ $key.Expiration.Format "Jan 2, 2006" }}
					{{ end }}
				</td>
				{{ end }}
				<td>
					{{ $key.Modified.Format "15:04" }}<br>
					{{ $key.Modified.Format "Jan 2, 2006" }}
				</td>
				{{ if $.IsRegistration }}
			   <td>
					{{ if $key.MaxActive }}
					<b>Max Active</b><br/>{{ $key.MaxActive }}<br/><br/>
					{{ end }}
					{{ if $key.MaxCreated }}
					<b>Max Created</b><br/>{{ $key.MaxCreated }}<br/>
					{{ end }}
			   </td>
			   {{ end }}
			   {{ if $.IsRegistration }}
			   <td class="has-text-centered">
					{{ if $key.NumTunsCreated }}
					<a href="/admin/token/tunnel?token={{ $key.ID.String }}">{{ $key.NumTunsCreated }}</a>
					{{ else }}
					<i class="fas fa-minus has-text-grey"></i>
					{{ end }}
				</td>
			   {{ end }}
				<td class="has-text-wrap">
					{{ $key.KeySnippetN 24 }}...
					<span style="display: none;">{{ $key.Value }}</span><br>
					<a href="#" onclick="javascript:clipTokenValue(event, this);">Copy</a>
				</td>
			</tr>
			{{ end }}
		</tbody>
	</table>
	<!-- bottom page controls -->
	<div class="columns">
		<div class="column">
			<div class="buttons is-right">
				<a class="button is-light"
					{{ if .Prev }}href="/admin/token/registration?page={{ .PrevPage }}"{{ else }}disabled="disabled"{{ end }}>
					<span class="icon"><i class="fas fa-angle-left"></i></span>
					<span>Previous</span>
				</a>
				<a class="button is-light"
					{{ if .Next }}href="/admin/token/registration?page={{ .NextPage }}"{{ else }}disabled="disabled"{{ end }}>
					<span>Next</span>
					<span class="icon"><i class="fas fa-angle-right"></i></span>
				</a>
			</div>
		</div>
	</div>
</section>
{{ template "menu-toggle" . }}
</div>
<script>
function clipTokenValue(event, sender) {
	event.preventDefault();
	if (!isValid(sender)) {
		return;
	}

	var parent = sender.parentNode;
	var key = parent.querySelector("span");
	if (!isValid(key)) {
		return;
	}

	// Display the <span> but throw it off-screen so we don't actually 
	// see it.
	key.style.position = "absolute";
	key.style.top      = "-500px";
	key.style.left     = "-500px";
	key.style.display  = "block";

	var range = document.createRange();
	range.selectNodeContents(key);

	// Remove the current selection and add this one, then copy it to
	// clipboard.
	var sel = window.getSelection();
	sel.removeAllRanges();
	sel.addRange(range);
	document.execCommand("copy");

	// Hide the element again.
	key.style.display = "none";

	// Finally, we change the text to indicate we copied it and set a timer
	// so we can revert it to the original in a few seconds.
	sender.innerHTML = "Copied!";
	setTimeout(function() {sender.innerHTML = "Copy";}, 3000);
}
</script>
{{ end }}

{{ define "admin-token-create-content" }}
{{ template "nav-sidebar" . }}
<div id="content">
{{ template "navbar-user" . }}
<section class="section dashboard-wrapper p-t-xxl">
	<div class="columns">
		<div class="column is-12-desktop">
			<div class="content is-medium">
				<h1>{{ if .Key }}Edit Token{{ else }}Create Token{{ end }}</h1>
			</div>
			<form class="box" method="POST" 
				{{ if .Key }}action="/admin/token/edit"{{ end }} >
				<input type="hidden" name="scope" value="{{ .Scope }}">

				<!-- update existing -->
				{{ if .Key }}<input type="hidden" name="apikey" value="{{ .Key.ID.String }}">{{ end }}
				<!-- short description -->
				{{ if len (.Error "scope") }}<div class="notification">{{ .Error "scope" }}</div>{{ end }}
				{{ if len (.Error "name")  }}<div class="notification">{{ .Error "name"  }}</div>{{ end }}
				{{ if len (.Error "warning")  }}<div class="notification">{{ .Error "warning"  }}</div>{{ end }}
				{{ if len (.Error "expiration") }}<div class="notification">{{ .Error "expiration" }}</div>{{ end }}
				{{ if len (.Error "maxCreated") }}<div class="notification">{{ .Error "maxCreated" }}</div>{{ end }}
				{{ if len (.Error "maxActive") }}<div class="notification">{{ .Error "maxActive" }}</div>{{ end }}
				<div class="field is-horizontal">
					<div class="field-label is-normal">
						<label>Short Description</label>
					</div>
					<div class="field-body">
						<div class="field">
							<p class="control">
								<input class="input" name="name" type="text" placeholder="Enter name, label or short description" 
									value="{{ if .Key }}{{ .Key.Name }}{{ end }}">
							</p>
						</div>
					</div>
				</div>
				{{ if .IsRegistration }}
				<div class="field is-horizontal">
					<div class="field-label is-normal">
						<label>Expiration Date</label>
					</div>
					<div class="field-body">
						<div class="field">
							<p class="control">
								<input class="input" name="expiration" type="date" placeholder="YYYY-MM-DD" 
									value="{{ if and .Key (not .Key.Expiration.IsZero) }}{{ .Key.Expiration.Format "2006-01-02" }}{{ end }}">
							</p>
						</div>
					</div>
				</div>
				<div class="field is-horizontal">
					<div class="field-label is-normal">
						<label>Max Created</label>
					</div>
					<div class="field-body">
						<div class="field">
							<p class="control">
								<input class="input" name="maxCreated" type="number" min="1" placeholder="Maximum tunnels that can ever be created (optional)" 
									value="{{ if and .Key .Key.MaxCreated (gt .Key.MaxCreated 0) }}{{ .Key.MaxCreated }}{{ end }}">
							</p>
						</div>
					</div>
				</div>
				<div class="field is-horizontal">
					<div class="field-label is-normal">
						<label>Max Active</label>
					</div>
					<div class="field-body">
						<div class="field">
							<p class="control">
								<input class="input" name="maxActive" type="number" min="1" placeholder="Maximum active tunnels at any time (optional)" 
									value="{{ if and .Key .Key.MaxActive (gt .Key.MaxActive 0) }}{{ .Key.MaxActive }}{{ end }}">
							</p>
						</div>
					</div>
				</div>
				{{ end }}
				<div class="field is-horizontal">
					<div class="field-label ">
						<label>Active</label>
					</div>
					<div class="field-body">
						<div class="field">
							<div class="control">
								<label class="checkbox">
									<input type="checkbox" name="active" {{ if .Key }}{{ if .Key.Active }}checked{{ end }}{{ end }}>
								</label>
							</div>
						</div>
					</div>
				</div>				
				<div class="field">
					<div class="buttons">
						<input class="button is-info" type="submit" value="{{ if .Key }}Update{{ else }}Create{{ end }}">
						{{ if .Key }}<a id="{{ .Key.ID.String }}" class="button is-danger" onclick="javascript:confirmDeleteToken(event, this);">Delete</a>{{ end }}
						<a class="button is-light" 
							{{ if .IsRegistration }}href="/admin/token/registration"{{ end }}
							{{ if .IsAPI }}href="/admin/token/api"{{ end }}>Cancel</a>
					</div>
				</div>
			</form>
		</div>
	</div>
</section>
{{ template "menu-toggle" . }}
</div>
{{ template "admin-token-delete-dialog" . }}
{{ end }}

{{ define "admin-token-delete-dialog" }}
<div id="deleteTokenConfirm" class="modal">
	<div class="modal-background"></div>
	<div class="modal-card">
		<header class="modal-card-head">
			<p class="modal-card-title">Delete Token</p>
			<a class="delete" aria-label="close"
				onclick="javascript:cancelTokenDelete(event, this);"></a>
		</header>
		<section class="modal-card-body">
			<p>This operation will delete a registration token which can impact a fleet of clients or devives.  For example, it may potentially prevent clients using it to create new auth tokens and (re)configure tunnels.</p>
			<br>
			<p>Do you want to continue?</p>
		</section>
		<footer class="modal-card-foot">
			<a class="button is-success" onclick="javascript:acceptTokenDelete(event, this);">Yes</a>
			<a class="button" onclick="javascript:cancelTokenDelete(event, this);">Cancel</a>
		</footer>
	</div>
</div>
<script>
var tokenId = "";

function confirmDeleteToken(event, sender) {
	event.preventDefault();
	var bttn = document.querySelector("#deleteTokenConfirm");
	if (isValid(bttn)) {
		bttn.classList.toggle("is-active");
	}

	// Update this value.
	tokenId = sender.id;
}

function cancelTokenDelete(event, sender) {
	var dialog = document.querySelector("#deleteTokenConfirm");
	if (isValid(dialog)) {
		dialog.classList.toggle("is-active");
	}
}

function acceptTokenDelete(event, sender) {
	var dialog = document.querySelector("#deleteTokenConfirm");
	if (isValid(dialog)) {
		dialog.classList.toggle("is-active");
	}
	window.location = "/admin/token/delete/" + tokenId;
}
</script>
{{ end }}

{{ define "admin-token-tunnels-content" }}
{{ template "nav-sidebar" . }}
<div id="content">
{{ template "navbar-user" . }}
<section class="section dashboard-wrapper p-t-xxl">
	<div class="content is-medium">
		<h1>Token-Tunnel Instances</h1>
		<p>This page displays active tunnels that have been created using the registration token: <strong>{{ .Token.Name }}</strong>.  Tunnels that have been terminated are not present.</p>
	</div>
	
	<!-- top page controls -->
	<div class="columns">
		<div class="column">
			<div class="buttons is-right">
				<a class="button is-light"
					{{ if .Prev }}href="/admin/token/tunnel?token={{ .TokenID }}&page={{ .PrevPage }}"{{ else }}disabled="disabled"{{ end }}>
					<span class="icon"><i class="fas fa-angle-left"></i></span>
					<span>Previous</span>
				</a>
				<a class="button is-light"
					{{ if .Next }}href="/admin/token/tunnel?token={{ .TokenID }}&page={{ .NextPage }}"{{ else }}disabled="disabled"{{ end }}>
					<span>Next</span>
					<span class="icon"><i class="fas fa-angle-right"></i></span>
				</a>
			</div>
		</div>
	</div>
	
	{{ template "admin-token-tunnel-list" . }}
	
	<!-- bottom page controls -->
	<div class="columns">
		<div class="column">
			<div class="buttons is-right">
				<a class="button is-light"
					{{ if .Prev }}href="/admin/token/tunnel?token={{ .TokenID }}&page={{ .PrevPage }}"{{ else }}disabled="disabled"{{ end }}>
					<span class="icon"><i class="fas fa-angle-left"></i></span>
					<span>Previous</span>
				</a>
				<a class="button is-light"
					{{ if .Next }}href="/admin/token/tunnel?token={{ .TokenID }}&page={{ .NextPage }}"{{ else }}disabled="disabled"{{ end }}>
					<span>Next</span>
					<span class="icon"><i class="fas fa-angle-right"></i></span>
				</a>
			</div>
		</div>
	</div>
</section>
{{ template "menu-toggle" . }}
</div>
{{ end }}

{{ define "admin-token-tunnel-list" }}
<table class="table is-fullwidth is-bordered">
	<thead class="grey">
		<tr>
			<th>Tunnel</th>
			<th>Status</th>
			<th>Uptime</th>
			<th>Client</th>
			<th>Host</th>
			<th>Bandwidth</th>
			<th>Last Active</th>
		</tr>
	</thead>
	<tbody>
		{{ if eq (len .Tunnels) 0 }}
		<tr>
			<td colspan="7" class="content is-medium has-text-centered p-xxl">
				<h1>No tunnels found for this token</h1>
			</td>
		</tr>
		{{ end }}
		{{ range $tun := .Tunnels }}
		<tr>
			<td>
				<h2><a href="/admin/tunnel/{{ $tun.ID.String }}">{{ $tun.Name }}</a></h2>
				<p class="m-t-sm">Hostname:<br/><a href="/admin/tunnel/{{ $tun.ID.String }}/http">{{ $tun.Hostname }}</a></p>
			</td>
			<td class="has-text-centered">
				{{ if eq $tun.State 2 }}
				<i class="has-text-success fas fa-heartbeat"></i>
				{{ else if eq $tun.State 3}}
				<i class="has-text-grey fas fa-heartbeat"></i>
				{{ else }}
				<i class="has-text-grey fas fa-minus"></i>
				{{ end }}
			</td>
			<td>{{ $tun.UptimeString }}</td>
			<td>
				{{ if len $tun.Client.OS }}
				{{ $tun.Client.Version }}<br/>
				{{ $tun.Client.OS }} / {{ $tun.Client.Arch }}<br/>
				{{ end }}
			</td>
			<td>{{ $tun.Address }}</td>
			<td>
				<b>Daily</b><br/>
				{{ $tun.Bandwidth.Daily.String }}<br/><br/>
				<b>Monthly</b><br/>
				{{ $tun.Bandwidth.Monthly.String }}
			</td>
			<td>{{ $tun.LastActive.Format "Jan 2, 2006 15:04" }}</td>
		</tr>
		{{ end }}
	</tbody>
</table>
{{ end }}