{{ define "service-menu" }}
<aside class="menu">
    <p class="menu-label">Traffic</p>
    <ul class="menu-list">
        <li><a href="/admin/services/http" 
        	{{ if .Menu.HTTP }}class="is-active"{{ end }}>HTTP</a></li>
        <li><a href="/admin/services/tcp" 
        	{{ if .Menu.TCP  }}class="is-active"{{ end }}>TCP</a></li>
        <!--<li><a href="/admin/services/portmap" 
        	{{ if .Menu.PortMapping }}class="is-active"{{ end }}>Port Mapping</a></li>-->
    </ul>
    <p class="menu-label">Diagnostics</p>
    <ul class="menu-list">
        <li><a href="/admin/services/access" 
        	{{ if .Menu.Connections }}class="is-active"{{ end }}>Connections</a></li>
        <li><a href="/admin/services/events" 
        	{{ if .Menu.Events }}class="is-active"{{ end }}>Events</a></li>
    </ul>
</aside>
{{ end }}

{{ define "admin-service-status-content" }}
{{ template "nav-sidebar" . }}
<div id="content">
{{ template "navbar-user" . }}
<section class="section dashboard-wrapper p-t-xxl">
	<div class="content is-medium">
		<h1>Services</h1>
		<p>Use Spokes as a standard reverse proxy without remote tunnels.</p>
	</div>
	<div class="columns m-t-lg">
		<div class="column is-2-desktop">
			{{ template "service-menu" . }}
		</div>
		<div class="column is-10-desktop">

			{{ if .Menu.HTTP }}
			{{ template "service-http-content" . }}
			{{ end }}

			{{ if .Menu.TCP }}
			{{ template "service-tcp-content" . }}
			{{ end }}

			{{ if .Menu.PortMapping }}
			{{ template "service-portmap-content" . }}
			{{ end }}

			{{ if .Menu.Connections }}
			{{ template "service-connections-content" . }}
			{{ end }}

			{{ if .Menu.Events }}
			{{ template "service-events-content" . }}
			{{ end }}
		</div>
	</div>
</section>
{{ template "menu-toggle" . }}
</div>
{{ end }}

{{ define "service-http-content" }}
<div class="buttons is-right">
	<a class="button is-light" href="/admin/services/http/add">
		<span class="icon is-small"><i class="fas fa-plus"></i></span>
		<span>Add Rule</span>
	</a>
</div>
<table class="table is-fullwidth is-bordered">
	<thead class="grey">
		<tr>
			<th>Domain</th>
			<th>Bandwidth</th>
			<th>Available</th>
			<th>Encryption</th>
			<th>Upstream</th>
			<th>Actions</th>
		</tr>
	</thead>
	<tbody>
		{{ if eq (len .Tunnel.Https) 0 }}
		<tr>
			<td colspan="6" class="content is-medium has-text-centered p-xxl">
				<h3>No rules for HTTP traffic found</h3>
			</td>
		</tr>
		{{ end }}
		{{ range $http := .Configuration.Https }}
		<tr>
			<td>HTTP{{ if $http.Secure }}/S{{ end }}:<br/>
				{{ $http.Domain }}<br/>
				<a style="color: inherit;"
					href="/admin/services/http/update/{{ $http.Domain }}"><i class="fas fa-edit"></i></a>
			</td>
			{{ with $h := $.GetHTTPService $http.Domain }}
			{{ if $h }}
			<td>
				<b>Daily:</b><br>
				{{ $h.Bandwidth.Daily.String }}<br><br>
				<b>Monthly:</b><br>
				{{ $h.Bandwidth.Monthly.String }}<br>
			</td>
			<td class="has-text-centered">
				{{ if $h.Available }}
				<i class="has-text-success fas fa-heartbeat"></i>
				{{ else }}
				<i class="has-text-grey fas fa-heartbeat"></i>
				{{ end }}
			</td>
			{{ else }}
			<td></td><td></td>
			{{ end }}{{ end }}
			<td class="has-text-centered">
			{{ if $http.UseLetsEnc }} <i class="fas is-size-4 fa-lock has-text-grey"></i><br>Let's Encrypt
			{{ else if len $http.CA }}<i class="fas is-size-4 fa-lock has-text-grey"></i><br>Custom Certificates
			{{ else if $http.TLS }}   <i class="fas is-size-4 fa-lock has-text-grey"></i><br>TLS Proxy
			{{ else }}<i class="fas is-size-4 fa-lock has-text-grey"></i><br>Server TLS{{ end }}</td>
			<td>
				{{ if len $http.Destination }}

				{{ if $http.Port }}
				<b>HTTP:</b><br>
				tcp://{{ $http.Destination }}:{{ $http.Port }}<br><br>{{ end }}
				{{ if $http.TLS }}
				<b>TLS:</b><br>
				tcp://{{ $http.Destination }}:{{ $http.TLS }}<br><br>{{ end }}
				
				{{ end }}

				{{ if $http.UpstreamURL }}
				<b>URL:</b><br>
				{{ $http.UpstreamURL }}<br><br>{{ end }}

				{{ if len $http.WebRoot }}
				<b>Webroot:</b><br>
				<span class="has-text-wrap">{{ $http.WebRoot }}</span><br><br>{{ end }}
			</td>
			<td class="has-text-centered">
				<form method="POST" action="/admin/services/http/remove">
					<input type="hidden" name="domain" value="{{ $http.Domain }}">
					<input type="hidden" name="action" value="release">
					<button class="button is-small is-danger" onclick="javascript:removeHttpRule(event, this);">Remove</button>
				</form>
			</td>
		</tr>
		{{ end }}
	</tbody>
</table>
{{ template "admin-remove-http-dialog" . }}
<script>
var removeHttpForm = null;

function removeHttpRule(event, sender) {
	event.preventDefault();
	if (isValid(sender)) {
		removeHttpForm = sender.parentNode;
	}

	var dialog = document.querySelector("#removeHttpConfirm");
    if (isValid(dialog)) {
    	dialog.classList.toggle("is-active");
    }
}
</script>
{{ end }}

{{ define "service-tcp-content" }}
<div class="buttons is-right">
	<a class="button is-light"
		href="/admin/services/tcp/allocate">
		<span class="icon is-small"><i class="fas fa-plus"></i></span>
		<span>Random Port</span>
	</a>
	<a class="button is-light" onclick="javascript:showCustomAllocate(event, this);">
		<span class="icon is-small"><i class="fas fa-plus"></i></span>
		<span>Custom Port</span>
	</a>
</div>
<table class="table is-fullwidth is-bordered is-hoverable">
	<thead class="grey">
		<tr>
			<th>Port</th>
			<th>Bandwidth</th>
			<th>Available</th>
			<th>Destination Host</th>
			<th colspan="2">Destination Port</th>
		</tr>
	</thead>
	<tbody>
		{{ if eq (len .Tunnel.Ports) 0 }}
		<tr>
			<td colspan="6" class="content is-medium has-text-centered p-xxl">
				<h3>No rules for TCP traffic found</h3>
			</td>
		</tr>
		{{ end }}
		{{ range $port := .Configuration.Ports }}
		<tr>
			<td>{{ $port.Port }}<br>
				<a style="color: inherit;" 
					href="/admin/services/tcp/update/{{ $port.Port }}"><i class="fas fa-edit"></i></a></td>
			{{ $p := $.GetPortService $port.Port }}
			{{ if $p }}
			<td>
				<b>Daily:</b><br>
				{{ $p.Bandwidth.Daily.String }}<br><br>
				<b>Monthly:</b><br>
				{{ $p.Bandwidth.Monthly.String }}<br>
			</td>
			<td class="has-text-centered">
				{{ if $p.Available }}
				<i class="has-text-success fas fa-heartbeat"></i>
				{{ else }}
				<i class="has-text-grey fas fa-heartbeat"></i>
				{{ end }}
			</td>
			{{ else }}
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			{{ end }}
			<td>{{ $port.Destination }}</td>
			<td>{{ $port.DstPort }}</td>
			<td class="has-text-centered">
				<form method="POST" action="/admin/services/tcp/release">
					<input type="hidden" name="port" value="{{ $port.Port }}">
					<input type="hidden" name="action" value="release">
					<button class="button is-small is-danger" onclick="javascript:releasePort(event, this);">Release</button>
				</form>
			</td>
		</tr>
		{{ end }}
	</tbody>
</table>
{{ template "admin-tun-release-port-dialog" . }}
{{ template "admin-service-custom-port-dialog" .  }}
{{ end }}

{{ define "admin-service-custom-port-dialog" }}
<!-- Allocate custom port modal -->
<div id="allocateCustomPortDialog" class="modal">
	<div class="modal-background"></div>
	<div class="modal-card">
		<header class="modal-card-head">
			<p class="modal-card-title">Allocate Custom Port</p>
			<a class="delete" aria-label="close" onclick="cancelCustomAllocate(event, this);"></a>
		</header>
		<section class="modal-card-body">
			<form id="allocateCustomForm" method="POST" action="/admin/services/tcp/allocate">
				<div class="field">
					<label class="label">Port Number</label>
					<div class="control">
						<input class="input" type="number" name="port" required>
					</div>
				</div>
				<input type="hidden" name="action" value="custom">
			</form>
		</section>
		<footer class="modal-card-foot">
			<a class="button is-success" onclick="acceptCustomAllocate(event, this);">Allocate</a>
			<a class="button" onclick="cancelCustomAllocate(event, this);">Cancel</a>
		</footer>
	</div>
</div>
<script>
var allocateCustomForm = null;
function showCustomAllocate(event, sender) {
	event.preventDefault();
	allocateCustomForm = document.querySelector('#allocateCustomForm');
	var dialog = document.querySelector('#allocateCustomPortDialog');
	if (dialog) {
		dialog.classList.add('is-active');
	}
}
function cancelCustomAllocate(event, sender) {
	var dialog = document.querySelector('#allocateCustomPortDialog');
	if (dialog) {
		dialog.classList.remove('is-active');
	}
	allocateCustomForm = null;
}
function acceptCustomAllocate(event, sender) {
	var dialog = document.querySelector('#allocateCustomPortDialog');
	if (dialog) {
		dialog.classList.remove('is-active');
	}
	if (allocateCustomForm) {
		allocateCustomForm.submit();
	}
}
</script>

{{ end }}


{{ define "service-portmap-content" }}
<div class="buttons is-right">
	<a class="button is-light"
		href="/admin/services/portmap/create">
		<span class="icon is-small"><i class="fas fa-plus"></i></span>
		<span>Create Port Mapping</span>
	</a>
</div>
<table class="table is-fullwidth is-bordered is-hoverable">
	<thead class="grey">
		<tr>
			<th>Label</th>
			<th>Listening Port</th>
			<th>Destination</th>
			<th>HTTP</th>
			<th>Caching Options</th>
			<th>Actions</th>
		</tr>
	</thead>
	<tbody>

		{{ if eq (len .Tunnel.PortMappings) 0 }}
		<tr>
			<td colspan="6" class="content is-medium has-text-centered p-xxl">
				<h3>No rules for Port Mappings found</h3>
			</td>
		</tr>
		{{ end }}

		{{ range $pm := .Tunnel.PortMappings }}
		<tr>
			<td>{{ if len $pm.Label }}{{ $pm.Label }}{{ else }}Unspecified{{ end }}<br>
				<a style="color: inherit;" 
					href="/admin/services/portmap/update/{{ $pm.ListenPort }}"><i class="fas fa-edit"></i></a></td>
			<td>{{ $pm.ListenPort }}</td>
			<td>{{ $pm.Transport }}:{{ $pm.Destination }}:{{ $pm.DstPort }}</td>
			<td class="has-text-centered">
				{{ if $pm.HTTP }}
				<i class="has-text-success fas fa-check"></i>
				{{ else }}
				<i class="has-text-grey fas fa-minus"></i>
				{{ end }}
			</td>
			<td class="has-text-centered">
				<i class="has-text-grey fas fa-minus"></i>
			</td>
			<td class="has-text-centered">
				<form method="POST" action="/admin/services/portmap/remove">
					<input type="hidden" name="listenPort" value="{{ $pm.ListenPort }}">
					<input type="hidden" name="action" value="remove">
					<button class="button is-small is-danger" onclick="javascript:removePortMapRule(event, this);">Remove</button>
				</form>
			</td>
		</tr>
		{{ end }}
	</tbody>
</table>
{{ template "admin-tun-remove-portmap-dialog" . }}
<script>
var removePortMap = null;

function removePortMapRule(event, sender) {
	event.preventDefault();
	if (isValid(sender)) {
		removePortMap = sender.parentNode;
	}

	var dialog = document.querySelector("#removePortMapConfirm");
    if (isValid(dialog)) {
    	dialog.classList.toggle("is-active");
    }
}
</script>
{{ end }}

{{ define "service-connections-content" }}
{{ template "admin-services-access-filter" . }}
<table class="table is-fullwidth is-bordered is-hoverable">
	<thead class="grey">
		<tr>
			<th class="">Service</th>
			<th class="">Source Address</th>
			<th class="">Data</th>
			<th class="">Timestamp</th>
		</tr>
	</thead>
	<tbody>
		{{ if eq (len .Metrics) 0 }}
		<tr>
			<td colspan="4" class="content is-medium has-text-centered p-xxl">
				<h3>No connection metrics.</h3>
			</td>
		</tr>
		{{ end }}
		{{ range $metric := .Metrics }}
		<tr>
			<td>{{ $.ServiceName $metric.ServiceID.String }}</td>
			<td>{{ $metric.Address }}</td>
			<td class="has-text-centered">{{ $metric.DataUsage }}</td>
			<td>{{ $metric.Closed.Format "15:04:05" }}<br/>
				{{ $metric.Closed.Format "Jan 2, 2006" }}
			</td>
		</tr>
		{{ end }}
	</tbody>
</table>
<nav class="pagination is-centered" role="navigation" aria-label="pagination">
	<ul class="pagination-list">
		{{ if gt $.PrevPage 0 }}
		<a class="pagination-link"
			href="/admin/services/access?page={{ $.PrevPage }}{{ if len $.ServiceID }}&service={{ $.ServiceID }}{{ end }}">
			Previous		
		</a>
		{{ end }}
		<a class="pagination-link is-current" 
			href="/admin/services/access?page={{ $.CurrMetricPage }}{{ if len $.ServiceID }}&service={{ $.ServiceID }}{{ end }}">
			{{ $.CurrMetricPage }}</a>
		{{ range $np := .NextPages }}
		<a class="pagination-link" href="/admin/services/access?page={{ $np }}{{ if len $.ServiceID }}&service={{ $.ServiceID }}{{ end }}">
			{{ $np }}</a>
		{{ end }}
		{{ if ne $.NextPage -1 }}
		<a class="pagination-link" 
			href="/admin/services/access?page={{ $.NextPage }}{{ if len $.ServiceID }}&service={{ $.ServiceID }}{{ end }}">
			Next	
		</a>
		{{ end }}
	</ul>
</nav>
{{ end }}

{{ define "admin-services-access-filter" }}
<div class="columns">
	<div class="column">
		<nav class="" role="navigation" aria-label="pagination">
			{{ if gt $.PrevPage 0 }}
			<a class="button"
				href="/admin/services/access?page={{ $.PrevPage }}{{ if len .ServiceID }}&service={{ .ServiceID }}{{ end }}">
				Previous
			</a>
			{{ else }}
			<a class="button" disabled="disabled">Previous</a>
			{{ end }}
			{{ if ne $.NextPage -1 }}
			<a class="button"
				href="/admin/services/access?page={{ $.NextPage }}{{ if len .ServiceID }}&service={{ .ServiceID }}{{ end }}">
				Next		
			</a>
			{{ else }}
			<a class="button" disabled="disabled">Next</a>
			{{ end }}
		</nav>
	</div>
	<div class="column">
		<nav class="navbar" role="navigation" aria-label="service filter">
			<div class="navbar-end">
				<div class="navbar-item has-dropdown is-hoverable">
					<a class="navbar-link">
						Filter by Service
					</a>
					<div class="navbar-dropdown">
						<a class="navbar-item" href="/admin/services/access">All</a>
						{{ range $hs := .Tunnel.Https }}
						<a class="navbar-item" 
							href="/admin/services/access?service={{ $hs.ID.String }}">{{ $hs.DomainName }}</a>	
						{{ end }}
						{{ range $ps := .Tunnel.Ports }}
						<a class="navbar-item" href="/admin/services/access?service={{ $ps.ID.String }}">tcp:{{ $ps.Port }}</a>	
						{{ end }}
					</div>
				</div>
			</div>
		</nav>
	</div>
</div>
{{ end }}

{{ define "service-events-content" }}
<div class="column is-12-desktop">
		<div class="columns">
			<div class="column is-6-desktop">
				<!-- can add more filters here -->
				<div class="buttons is-left">
					<a class="button is-danger" onclick="javascript:confirmDeleteEvents(event, this);">
						<span class="icon is-small"><i class="fas fa-trash"></i></span>
						<span>Delete</span>
					</a>
				</div>
			</div>
			<div class="column is-6-desktop">
				<div class="buttons is-right">
					<a class="button is-light"
						{{ if .Events.Prev }}href="/admin/services/events?page={{ .Events.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 .Events.Next }}href="/admin/services/events?page={{ .Events.NextPage }}"{{ else }}disabled="disabled"{{ end }}>
						<span>Next</span>
						<span class="icon"><i class="fas fa-angle-right"></i></span>
					</a>
				</div>
			</div>
		</div>
</div>
<table class="table is-fullwidth is-bordered is-hoverable">
	<thead class="grey">
		<tr>
			<th>Category</th>
			<th>Level</th>
			<th>Created</th>
			<th>Host</th>
			<th>Value</th>
		</tr>
	</thead>
	<tbody>
		{{ if eq (len .Events.Messages) 0 }}
		<tr>
			<td colspan="6" class="content is-medium has-text-centered p-xxl">
				<h3>No events.</h3>
			</td>
		</tr>
		{{ end }}
		{{ range $msg := .Events.Messages }}
		<tr>
			<td>{{ $msg.CategoryString }}</td>
			<td class="has-text-centered">
				{{ if eq $msg.Level 1 }}
				<i class="fas fa-info-circle"></i>
				{{ else if eq $msg.Level 2 }}
				<i class="has-text-warning fas fa-exclamation-triangle"></i>
				{{ else if eq $msg.Level 3 }}
				<i class="has-text-danger fas fa-exclamation-triangle"></i>
				{{ else }}
				<i class="has-text-grey fas fa-question-circle"></i>
				{{ end }}
			</td>
			<td>
				{{ $msg.Created.Format "Jan 2, 15:04:05 2006" }}
			</td>
			<td>{{ $msg.Host }}</td>
			<td class="has-text-wrap">{{ $msg.HTML }}</td>
		</tr>
		{{ end }}
	</tbody>
</table>
<div class="column is-12-desktop">
		<div class="columns">
			<div class="column is-6-desktop"></div>
			<div class="column is-6-desktop">
				<div class="buttons is-right">
					<a class="button is-light"
						{{ if .Events.Prev }}href="/admin/services/events?page={{ .Events.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 .Events.Next }}href="/admin/services/events?page={{ .Events.NextPage }}"{{ else }}disabled="disabled"{{ end }}>
						<span>Next</span>
						<span class="icon"><i class="fas fa-angle-right"></i></span>
					</a>
				</div>
			</div>
		</div>
</div>
{{ end }}