{{ define "admin-tunnel-edit-http-rule" }}
{{ template "nav-sidebar" . }}
<div id="content">
{{ template "navbar-user" . }}
<section class="section dashboard-wrapper p-t-xxl">
	<div class="content is-medium">
		<h2>HTTP/S Traffic</h2>
		{{ if .UpdateTraffic }}
		<p>Update or reset the HTTP traffic, security and routing rules.</p>
		{{ else }}
		<p>Create a new HTTP traffic rule.  Setup upstream server values, encryption options and any additional security mechanisms.</p>
		{{ end }}
	</div>
	<!-- client operation error -->
	{{ if len (.Error "client") }}<div class="notification is-warning">{{ .Error "client" }}</div>{{ end }}
	<form method="POST" enctype="multipart/form-data"
		{{ if not .Services }}
		{{ if .UpdateTraffic }}action="/admin/tunnel/manage/http/update"
		{{ else }}action="/admin/tunnel/manage/http/add"{{ end }}
		{{ else }}
		{{ if .UpdateTraffic }}action="/admin/services/http/update"
		{{ else }}action="/admin/services/http/add"{{ end }}
		{{ end }}>
		<input type="hidden" name="tunnel" value="{{ .Tunnel.ID.String }}">
		<div class="box">
			{{ if len (.Error "domain") }}<div class="notification is-warning">{{ .Error "domain" }}</div>{{ end }}
			<div class="field is-horizontal">
				<div class="field-label is-normal">
					<label class="label">Domain</label>
				</div>
				<div class="field-body">
					<div class="field">
						<p class="control">
							<input class="input" {{ if .UpdateTraffic }} readonly="true" {{ end }} type="text" name="domain" 
								placeholder="Domain or hostname, e.g. example.com or sub.example.com" 
								value="{{ .Http.Domain }}">
						</p>
					</div>
				</div>
			</div>
			<hr class="m-l-lg m-r-lg">
			<div class="field is-horizontal">
				<div class="field-label is-normal">
					<label class="label">Upstream</label>
				</div>
				<div class="field-body">
					<div class="select">
						<select class="input" onchange="javascript:changeUpstream(event, this);">
							<option value="upstreamURL" {{ if .Http.IsUpstreamURL }}selected{{ end }}>URL</option>
							<option value="manual"
								{{ if not .Http.IsUpstreamURL }}selected{{ end }}>Manual</option>
						</select>
					</div>
				</div>
			</div>

			{{ if len (.Error "upstreamURL") }}<div class="notification is-warning">{{ .Error "upstreamURL" }}</div>{{ end }}
			<div class="field is-horizontal upstreamURL {{ if not .Http.IsUpstreamURL }}is-hidden{{ end }}">
				<div class="field-label is-normal">
					<label class="label">URL</label>
				</div>
				<div class="field-body">
					<div class="field">
						<p class="control">
							<input class="input" type="text" name="upstreamURL" 
								placeholder="URL, e.g. http(s)://host:port"
								value="{{ if .Http.UpstreamURL }}{{ .Http.UpstreamURL }}{{ end }}">
						</p>
					</div>
				</div>
			</div>
			{{ if len (.Error "insecureUpstream") }}<div class="notification is-warning">{{ .Error "insecureUpstream" }}</div>{{ end }}
			<div class="field is-horizontal upstreamURL {{ if not .Http.IsUpstreamURL }}is-hidden{{ end }}">
				<div class="field-label ">
					<label class="label">Insecure Upstream TLS</label>
				</div>
				<div class="field-body">
					<div class="field">
						<div class="control">
							<label class="checkbox">
								<input type="checkbox" name="insecureUpstream" {{ if .Http.InsecureUpstream }}checked{{ end }}>
							</label>
						</div>
					</div>
				</div>
			</div>

			{{ if len (.Error "destination") }}<div class="notification is-warning">{{ .Error "destination" }}</div>{{ end }}
			<div class="field is-horizontal manual {{ if .Http.IsUpstreamURL }}is-hidden{{ end }}">
				<div class="field-label is-normal">
					<label class="label">Destination</label>
				</div>
				<div class="field-body">
					<div class="field">
						<p class="control">
							<input class="input" type="text" name="destination" placeholder="Hostname or IP address" 
								value="{{ .Http.Destination }}">
						</p>
					</div>
				</div>
			</div>
			<div class="field is-horizontal manual {{ if .Http.IsUpstreamURL }}is-hidden{{ end }}">
				<div class="field-label is-normal">
					<label class="label">HTTP</label>
				</div>
				<div class="field-body">
					<div class="field">
						<p class="control">
							<input class="input" type="text" name="http"
								placeholder="Listening port for HTTP (plain-text)"
								value="{{ if .Http.Port }}{{ .Http.Port }}{{ end }}">
						</p>
					</div>
				</div>
			</div>
			<div class="field is-horizontal manual {{ if .Http.IsUpstreamURL }}is-hidden{{ end }}">
				<div class="field-label is-normal">
					<label class="label">TLS</label>
				</div>
				<div class="field-body">
					<div class="field">
						<p class="control">
							<input class="input" type="text" name="tls" 
								placeholder="HTTPS listening port, implies TLS transparent proxying"
								value="{{ if .Http.TLS }}{{ .Http.TLS }}{{ end }}">
						</p>
					</div>
				</div>
			</div>
			<hr class="m-l-lg m-r-lg">
			<div class="field is-horizontal">
				<div class="field-label is-normal">
					<label class="label">Web Root</label>
				</div>
				<div class="field-body">
					<div class="field">
						<p class="control">
							<input class="input" type="text" name="webroot" 
								placeholder="Serve files from an absolute path on the client" 
								value="{{ .Http.WebRoot }}">
						</p>
					</div>
				</div>
			</div>
			{{ if not .DisableInspect }}
			{{ if len (.Error "inspect") }}<div class="notification is-warning">{{ .Error "inspect" }}</div>{{ end }}
			<hr class="m-l-lg m-r-lg">
			<div class="field is-horizontal">
				<div class="field-label ">
					<label class="label">Inspect</label>
				</div>
				<div class="field-body">
					<div class="field">
						<div class="control">
							<label class="checkbox">
								<input type="checkbox" name="inspect" {{ if .Http.Inspect }}checked{{ end }}>
							</label>
						</div>
					</div>
				</div>
			</div>
			{{ end }}
			{{ if len (.Error "redirect") }}<div class="notification is-warning">{{ .Error "redirect" }}</div>{{ end }}
			<div class="field is-horizontal">
				<div class="field-label ">
					<label class="label">HTTPS Redirect</label>
				</div>
				<div class="field-body">
					<div class="field">
						<div class="control">
							<label class="checkbox">
								<input type="checkbox" name="redirect" {{ if .Http.Redirect }}checked{{ end }}>
							</label>
						</div>
					</div>
				</div>
			</div>
			<div class="field is-horizontal">
				<div class="field-label is-normal">
					<label class="label">Rewrite Host</label>
				</div>
				<div class="field-body">
					<div class="field">
						<p class="control">
							<input class="input" type="text" name="rewriteHost"
								placeholder="Rewrite the Host field in the HTTP header to another value"
								value="{{ .Http.RewriteHost }}">
						</p>
					</div>
				</div>
			</div>
		</div>
		<div class="box">
			<div class="content is-medium">
				<h2>TLS</h2>
				<p>The default TLS encryption method will
				utilize the Spokes server to terminate TLS.  <i>Note</i> this is typically implemented
				by installing a wildcard certificate in the <code>certs-extra</code> directory.</p>
				<p>Using Let's Encrypt or custom certificates will implement end-to-end encrypted traffic
				with the tunnel.</p>
			</div>
			<div class="m-b-md">
				<div class="select">
					<select class="input" name="tlsOption" onchange="javascript:changeTLSOption(event, this);">
						<option value="serverTLS">Server TLS</option>
						<option value="letsEncrypt" {{ if .Http.UseLetsEnc }}selected{{ end }}>Let's Encrypt</option>
						<option value="certificate" {{ if and (len .Http.CA) (len .Http.PrivateKey) }}selected{{ end }}>Custom Certificate</option>
					</select>
				</div>
			</div>
			{{ if len (.Error "serverTLS") }}<div class="notification is-warning">{{ .Error "serverTLS" }}</div>{{ end }}
			{{ if .UpdateTraffic }}
			<div class="notification is-light">
				<p>Note, if you used custom certificates earlier and want to continue using them you <strong>must</strong>
				upload them again with the inputs below.  The client will <b>not</b> carry past
				ones forward.</p>
			</div>
			{{ end }}
			<div class="field certificate is-hidden">
				<div class="file has-name">
					<label class="file-label">
						<input class="file-input" type="file" name="certificate" onchange="javascript:updateFilename(event, this, 'certFilename');">
						<span class="file-cta">
							<span class="file-icon">
								<i class="fas fa-upload"></i>
							</span>
							<span class="file-label">
								File…
							</span>
						</span>
						<span id="certFilename" class="file-name">Custom certificate</span>
					</label>
				</div>
			</div>
			<div class="field certificate is-hidden">
				<div class="file has-name">
					<label class="file-label">
						<input class="file-input" type="file" name="privateKey" onchange="javascript:updateFilename(event, this, 'keyFilename');">
						<span class="file-cta">
							<span class="file-icon">
								<i class="fas fa-upload"></i>
							</span>
							<span class="file-label">
								File…
							</span>
						</span>
						<span id="keyFilename" class="file-name">Private key</span>
					</label>
				</div>
			</div>
		</div>
		<div class="box">
			<div class="content is-medium">
				<h2>Authentication</h2>
				<p>Users will be required to input a passphrase into a captive portal login and 
				authenticate, restricting traffic otherwise.  Resetting the password removes an
				existing password login.  It will also remove 2FA as well.</p>
			</div>
			{{ if len (.Error "password") }}<div class="notification is-warning">{{ .Error "password" }}</div>{{ end }}
			
			<div class="field is-horizontal">
				<div class="field-label is-normal">
					<label class="label">Method</label>
				</div>
				<div class="field-body">
					<div class="select">
						<select class="input" name="authMethod" onchange="javascript:changePassMethod(event, this);">
							<option value="none">--</option>
							<option value="password" {{ if .AuthIsPass }}selected{{ end }}>Password</option>
							<option value="openid" {{ if .AuthIsOIDC }}selected{{ end }}>OpenID Connect</option>
						</select>
					</div>
				</div>
			</div>

			{{ if len .Http.Password }}
			<div class="notification is-light">An authentication password is already set.  
			Leave the input fields below empty to maintain it.</div>
			<!-- conditional, only if a password is set -->
			<div class="field is-horizontal auth-password is-hidden">
				<div class="field-label ">
					<label class="label">Reset Password</label>
				</div>
				<div class="field-body">
					<div class="field">
						<div class="control">
							<label class="checkbox">
								<input type="checkbox" name="resetPassword">
							</label>
						</div>
					</div>
				</div>
			</div>
			{{ end }}

			<div class="field is-horizontal auth-password is-hidden">
				<div class="field-label is-normal">
					<label class="label">Password</label>
				</div>
				<div class="field-body">
					<div class="field">
						<p class="control">
							<input class="input" type="password" name="password"
								placeholder="Password protect a website, uses cookies to check authentication">
						</p>
					</div>
				</div>
			</div>
			<div class="field is-horizontal auth-password is-hidden">
				<div class="field-label is-normal">
					<label class="label">Confirm</label>
				</div>
				<div class="field-body">
					<div class="field">
						<p class="control">
							<input class="input" type="password" name="confirm" placeholder="Confirm password">
						</p>
					</div>
				</div>
			</div>
			<div class="field is-horizontal auth-password is-hidden">
				<div class="field-label ">
					<label class="label">Enable Two-Factor</label>
				</div>
				<div class="field-body">
					<div class="field">
						<div class="control">
							<label class="checkbox">
								<input type="checkbox" name="twoFactor" {{ if .Http.Requires2FA }}checked{{ end }}>
							</label>
						</div>
					</div>
				</div>
			</div>
			{{ if len (.Error "oidclientid") }}<div class="notification is-warning">{{ .Error "oidclientid" }}</div>{{ end }}
			<div class="field is-horizontal auth-openid is-hidden">
				<div class="field-label is-normal">
					<label class="label">Client ID</label>
				</div>
				<div class="field-body">
					<div class="field">
						<p class="control">
							<input class="input" type="text" name="oidclientid" placeholder="OpenID Connect Client ID"
								value="{{ if .Http.OIDC }}{{ .Http.OIDC.ClientID }}{{ end }}">
						</p>
					</div>
				</div>
			</div>
			{{ if len (.Error "oidclientsecret") }}<div class="notification is-warning">{{ .Error "oidclientsecret" }}</div>{{ end }}
			<div class="field is-horizontal auth-openid is-hidden">
				<div class="field-label is-normal">
					<label class="label">Client Secret</label>
				</div>
				<div class="field-body">
					<div class="field">
						<p class="control">
							<input class="input" type="text" name="oidclientsecret" placeholder="OpenID Connect Client Secret"
								value="{{ if .Http.OIDC }}{{ .Http.OIDC.ClientSecret }}{{ end }}">
						</p>
					</div>
				</div>
			</div>
			{{ if len (.Error "oidproviderURL") }}<div class="notification is-warning">{{ .Error "oidproviderURL" }}</div>{{ end }}
			<div class="field is-horizontal auth-openid is-hidden">
				<div class="field-label is-normal">
					<label class="label">Provider URL</label>
				</div>
				<div class="field-body">
					<div class="field">
						<p class="control">
							<input class="input" type="text" name="oidproviderURL" placeholder="OpenID Connect Provider URL"
								value="{{ if .Http.OIDC }}{{ .Http.OIDC.ProviderURL }}{{ end }}">
						</p>
					</div>
				</div>
			</div>
			{{ if len (.Error "oidredirectURL") }}<div class="notification is-warning">{{ .Error "oidredirectURL" }}</div>{{ end }}
			<div class="field is-horizontal auth-openid is-hidden">
				<div class="field-label is-normal">
					<label class="label">Redirect URL</label>
				</div>
				<div class="field-body">
					<div class="field">
						<p class="control">
							<input class="input" type="text" name="oidredirectURL" placeholder="OpenID Connect Redirect URL"
								value="{{ if .Http.OIDC }}{{ .Http.OIDC.RedirectURL }}{{ end }}">
						</p>
					</div>
				</div>
			</div>
			<hr class="m-l-lg m-r-lg"/>
			<div class="content is-medium">
				<p>Optionally customize the authentication page with a title, logo and link to another website.
				Check the URLs you input are correct.</p>
			</div>
			{{ if len (.Error "siteTitle") }}<div class="notification is-warning">{{ .Error "siteTitle" }}</div>{{ end }}
			<div class="field is-horizontal">
				<div class="field-label is-normal">
					<label class="label">Site Title</label>
				</div>
				<div class="field-body">
					<div class="field">
						<p class="control">
							<input class="input" type="text" name="siteTitle" placeholder="A custom title for the authentication page"
								value="{{ if .Http.AuthPageOpts }}{{ .Http.AuthPageOpts.Title }}{{ end }}">
						</p>
					</div>
				</div>
			</div>
			<div class="field is-horizontal">
				<div class="field-label is-normal">
					<label class="label">Site URL</label>
				</div>
				<div class="field-body">
					<div class="field">
						<p class="control">
							<input class="input" type="text" name="siteURL" placeholder="https://domain.com"
								value="{{ if .Http.AuthPageOpts }}{{ .Http.AuthPageOpts.SiteURL }}{{ end }}">
						</p>
					</div>
				</div>
			</div>
			<div class="field is-horizontal">
				<div class="field-label is-normal">
					<label class="label">Logo URL</label>
				</div>
				<div class="field-body">
					<div class="field">
						<p class="control">
							<input class="input" type="text" name="siteLogoURL" placeholder="A link to a logo of your company"
								value="{{ if .Http.AuthPageOpts }}{{ .Http.AuthPageOpts.LogoURL }}{{ end }}">
						</p>
					</div>
				</div>
			</div>
		</div>
		<div class="box">
			<div class="content is-medium">
				<h2>Basic-Digest</h2>
				<p>Restrict requests to tunnels using HTTP Basic-Digest that authenticates each request.</p>
			</div>
			{{ if len (.Error "digestUser") }}<div class="notification is-warning">{{ .Error "digestUser" }}</div>{{ end }}
			<div class="field is-horizontal">
				<div class="field-label is-normal">
					<label class="label">Username</label>
				</div>
				<div class="field-body">
					<div class="field">
						<p class="control">
							<input class="input" type="text" name="digestUser" placeholder="Username">
						</p>
					</div>
				</div>
			</div>
			{{ if len (.Error "digestPassword") }}<div class="notification is-warning">{{ .Error "digestPassword" }}</div>{{ end }}
			<div class="field is-horizontal">
				<div class="field-label is-normal">
					<label class="label">Password</label>
				</div>
				<div class="field-body">
					<div class="field">
						<p class="control">
							<input class="input" type="password" name="digestPassword" placeholder="Password">
						</p>
					</div>
				</div>
			</div>
		</div>
		<br>
		{{ template "firewall-traffic-edit" . }}
		<br>
		<div class="buttons">
			<input class="button is-info"  type="submit" name="action" value="Update">
			<a class="button is-light" 
			{{ if not .Services }}href="/admin/tunnel/{{ .Tunnel.ID.String }}"
			{{ else }}href="/admin/services/http"{{ end }}>Cancel</a>
		</div>
	</form>
</section>
<script>
function updateFilename(event, sender, id) {
	var dest = document.querySelector("#" + id);
	if (isValid(dest)) {
		if (isValid(sender.files[0])) {
			dest.innerHTML = sender.files[0].name;
		}
	}
}

function changePassMethod(event, sender) {
	var passMethod = sender.value;

	if (passMethod == "none") {
		hidePassMethods();
	} else if (passMethod == "password") {
		hidePassMethods();
		var elements = document.querySelectorAll(".auth-password");
		for (i = 0; i < elements.length; i++) {
			elements[i].classList.remove("is-hidden");
		}
	} else if (passMethod = "openid") {
		hidePassMethods();
		var elements = document.querySelectorAll(".auth-openid");
		for (i = 0; i < elements.length; i++) {
			elements[i].classList.remove("is-hidden");
		}
	}
}

function hidePassMethods() {
	var elements = document.querySelectorAll(".auth-password");
	for (i = 0; i < elements.length; i++) {
		elements[i].classList.add("is-hidden");
	}

	elements = document.querySelectorAll(".auth-openid");
	for (i = 0; i < elements.length; i++) {
		elements[i].classList.add("is-hidden");
	}
}

function changeUpstream(event, sender) {
	var upstreamMethod = sender.value;

	if (upstreamMethod == "upstreamURL") {
		hideUpstreamMethods();
		var elements = document.querySelectorAll(".upstreamURL");
		for (i = 0; i < elements.length; i++) {
			elements[i].classList.remove("is-hidden");
		}
	} else if (upstreamMethod = "manual") {
		hideUpstreamMethods();
		var elements = document.querySelectorAll(".manual");
		for (i = 0; i < elements.length; i++) {
			elements[i].classList.remove("is-hidden");
		}
	}
}

function hideUpstreamMethods() {
	var elements = document.querySelectorAll(".upstreamURL");
	for (i = 0; i < elements.length; i++) {
		elements[i].classList.add("is-hidden");
	}

	elements = document.querySelectorAll(".manual");
	for (i = 0; i < elements.length; i++) {
		elements[i].classList.add("is-hidden");
	}
}

function changeTLSOption(event, sender) {
	var tlsOption = sender.value;

	if (tlsOption == "serverTLS") {
		hideTLSOptions();
	} else if (tlsOption == "letsEncrypt") {
		hideTLSOptions();
		var elements = document.querySelectorAll(".letsEncrypt");
		for (i = 0; i < elements.length; i++) {
			elements[i].classList.remove("is-hidden");
		}
	} else if (tlsOption = "certificate") {
		hideTLSOptions();
		var elements = document.querySelectorAll(".certificate");
		for (i = 0; i < elements.length; i++) {
			elements[i].classList.remove("is-hidden");
		}
	}
}

function hideTLSOptions() {
	var elements = document.querySelectorAll(".letsEncrypt");
	for (i = 0; i < elements.length; i++) {
		elements[i].classList.add("is-hidden");
	}

	elements = document.querySelectorAll(".certificate");
	for (i = 0; i < elements.length; i++) {
		elements[i].classList.add("is-hidden");
	}
}

</script>
{{ template "menu-toggle" . }}
</div>
{{ template "loading-dialog" . }}
{{ end }}

{{ define "admin-tunnel-edit-tcp-rule" }}
{{ template "nav-sidebar" . }}
<div id="content">
{{ template "navbar-user" . }}
<section class="section dashboard-wrapper p-t-xxl">
	<div class="content is-medium">
		<h2>Port Traffic</h2>
		<p>Reset an existing traffic rule or update the destination for traffic.</p>
	</div>
	<!-- client operation error -->
	{{ if len (.Error "client") }}<div class="notification is-warning">{{ .Error "client" }}</div>{{ end }}
	<form class="box" method="POST" 
		{{ if not .Services }}action="/admin/tunnel/manage/tcp/update"
		{{ else }}action="/admin/services/tcp/update"{{ end }}>
		<input type="hidden" name="tunnel" value="{{ .Tunnel.ID.String }}">
		<input type="hidden" name="port" value="{{ .Port.Port }}">
		<div class="field is-horizontal">
			<div class="field-label is-normal">
				<label class="label">Port</label>
			</div>
			<!-- allocated listening port -->
			<div class="field-body">
				<div class="field">
					<p class="control">
						<input class="input" disabled type="text"  value="{{ .Port.Port }}">
					</p>
				</div>
			</div>
		</div>
		{{ if len (.Error "destination") }}<div class="notification is-warning">{{ .Error "destination" }}</div>{{ end }}
		<div class="field is-horizontal">
			<div class="field-label is-normal">
				<label class="label">Destination</label>
			</div>
			<div class="field-body">
				<div class="field">
					<p class="control">
						<input class="input" type="text" name="destination" 
							placeholder="Hostname or IP address" value="{{ .Port.Destination }}">
					</p>
				</div>
			</div>
		</div>
		{{ if len (.Error "destPort") }}<div class="notification is-warning">{{ .Error "destPort" }}</div>{{ end }}
		<div class="field is-horizontal">
			<div class="field-label is-normal">
				<label class="label">Destination Port</label>
			</div>
			<div class="field-body">
				<div class="field">
					<p class="control">
						<input class="input" type="text" name="destPort" 
							placeholder="Example, 8080, 8443, 5000, ..." value="{{ .Port.DstPort }}">
					</p>
				</div>
			</div>
		</div>
		<br>
		{{ template "firewall-traffic-edit" . }}
		<br>
		<div class="buttons">
			<input class="button is-info"  type="submit" name="action" value="Update">
			<input class="button is-light" type="submit" name="action" value="Reset">
		</div>
	</form>
</section>
{{ template "menu-toggle" . }}
</div>
{{ template "loading-dialog" . }}
{{ end }}

{{ define "firewall-traffic-edit" }}
{{ $firewall := .Firewall }}
<div class="box">
	{{ if len (.Error "firewall") }}<div class="notification is-warning">{{ .Error "firewall" }}</div>{{ end }}
	<div class="content is-medium">
		<h2>Firewall</h2>
		<p>Allow or restrict traffic to this TCP application using CIDR notation to 
		identify the IPv4 or IPv6 networks.  Some example networks can be the following: 
		<code>1.2.3.4/16</code> for IP4 or <code>2345:0425:2CA1:0000::0000/64</code> for IPv6.</p>
		<p>Note, rules must use proper sequence numbers that begin with 1, e.g. 1, 2, 3.</p>
	</div>
	
	<div class="buttons is-right">
		<button class="button is-button is-light" onclick="javascript:createFwRuleRow(event, this);">
			<span class="icon is-small"><i class="fas fa-plus"></i></span>
			<span>Add Rule</span>
		</button>
	</div>
	<table class="table is-fullwidth is-bordered is-hoverable">
		<thead class="grey">
			<tr>
				<th>Sequence</th>
				<th>Action</th>
				<th>Network</th>
				<th></th>
			</tr>
		</thead>
		<tbody id="rules">
			{{ if eq (len $firewall) 0 }}
			<tr>
				<td id="noFwRules" colspan="4" class="content is-small has-text-centered p-xxl">
					<h1>No firewall rules for this traffic rule.</h1>
				</td>
			</tr>
			{{ end }}
			{{ range $i, $rule := $firewall }}
			<tr>
				<td>
					<input class="input" name="sequence_{{ Incr $i }}" value="{{ $rule.Sequence }}">
				</td>
				<td>
					<div class="select">
						<select class="input" name="action_{{ Incr $i }}">
							<option value="allow" {{ if eq $rule.Action "allow" }}selected{{ end }}>Allow</option>
							<option value="drop" {{ if eq $rule.Action "drop" }}selected{{ end }}>Drop</option>
						</select>
					</div>
				</td>
				<td>
				<input class="input" name="network_{{ Incr $i }}" value="{{ $rule.Network }}">
				</td>
				<td class="has-text-centered">
					<button class="button is-small is-danger" onclick="javascript:removeFwRule(event, this);">Remove</button>
				</td>
			</tr>
			{{ end }}
		</tbody>
	</table>
</div>
<div class="is-hidden">
	<table><tbody><tr id="ruleTemplate">
		<td>
			<input class="input" name="" value="">
		</td>
		<td>
			<div class="select">
				<select class="input" name="">
					<option value="allow">Allow</option>
					<option value="drop">Drop</option>
				</select>
			</div>
		</td>
		<td>
			<input class="input" name="" value="">
		</td>
		<td class="has-text-centered">
			<button class="button is-small is-danger" onclick="javascript:removeFwRule(event, this);">Remove</button>
		</td>
	</tr>
	<tr id="noRuleTemplate">
		<td id="noFwRules" colspan="4" class="content is-small has-text-centered p-xxl">
			<h1>No firewall rules for this TCP application.</h1>
		</td>
	</tr>
	</tbody></table>
</div>
<script>
function createFwRuleRow(event, sender) {
	event.preventDefault();

	var rowNum = 0;

	var noRules = document.querySelector("#noFwRules");

	// Make sure we don't confuse this with our template.
	if (noRules.parentNode.id == "noRuleTemplate") {
		noRules = null;
	}

    if (isValid(noRules)) {
    	// No firewall rules.
    	rowNum = 1
    } else {
    	// Get the last firewall rule.
		var rules = document.querySelectorAll("tbody#rules tr");
		rowNum = rules.length + 1;
    } 

    // Now clone the template and add it to the rules.
	var ruleTemplate = document.querySelector("#ruleTemplate");
	if (!isValid(ruleTemplate)) {
		console.log("error: the FW rule template is invalid")
		return
	}
	var ruleRow = ruleTemplate.cloneNode(true);
	ruleRow.id = null;

	var cols = ruleRow.querySelectorAll("td")

	var sequence = cols[0];
	var action = cols[1];
	var network = cols[2];
	
	var seqInput = sequence.querySelector("input");
	seqInput.setAttribute("name", "sequence_"+ rowNum);
	seqInput.setAttribute("value", rowNum);

	var actionInput = action.querySelector("select");
	actionInput.setAttribute("name", "action_"+ rowNum);

	var netInput = network.querySelector("input");
	netInput.setAttribute("name", "network_"+ rowNum);

	// Now we add the new row.
	var rules = document.querySelector("tbody#rules");
	rules.appendChild(ruleRow);

	if (rowNum == 1) {
		noRules.parentNode.remove();
	}
}

function removeFwRule(event, sender) {
	event.preventDefault();

	var row = sender.parentNode.parentNode;

	var tableBody = row.parentNode;
	tableBody.removeChild(row);

	var rules = document.querySelectorAll("tbody#rules tr");
	if (rules.length > 0) {
		return;
	}

    // Now clone the template and add it to the rules.
	var noRuleTemplate = document.querySelector("#noRuleTemplate");
	if (!isValid(noRuleTemplate)) {
		console.log("error: the FW rule template is invalid")
		return
	}
	var noRuleRow = noRuleTemplate.cloneNode(true);
	noRuleRow.removeAttribute("id");

	// Now we add the new row.
	var rules = document.querySelector("tbody#rules");
	rules.appendChild(noRuleRow)
}
</script>
{{ end }}