{{ define "server-tls-content" }}
{{ template "nav-sidebar" . }}
<div id="content">
{{ template "navbar-user" . }}
<section class="section dashboard-wrapper p-t-xxl">
	<div class="container">
		{{ template "menu-toggle" . }}
		<div class="columns">
			<div class="column is-12">
				<div class="content is-medium">
					<h1 class="title">Server TLS</h1>
					<p>The certificates below are used to establish TLS sessions at servers edge.  This 
					means that TLS is terminated by Spokes and traffic is relayed to the appropiate tunnel.
					The encapulating reverse tunnel is <strong>always</strong> encrypted.</p>
					<p>Wildcard certificates are typically used to help manage fleets of tunnels.  Self-signed certificates can be used too.</p>
				</div>
				<div class="level">
					<div class="level-left"></div>
					<div class="level-right">
						<a href="/admin/server/tls/import" class="button is-light">
							<span class="icon"><i class="fas fa-upload"></i></span>
							<span>Import Certificate</span>
						</a>
					</div>
				</div>
				{{ if .Error }}
				<div class="notification is-danger">
					<button class="delete"></button>
					{{ .Error }}
				</div>
				{{ end }}
				{{ if .Deleted }}
				<div class="notification is-success">
					<button class="delete"></button>
					Certificate deleted successfully.
				</div>
				{{ end }}
				<table class="table is-fullwidth is-bordered">
					<thead class="grey">
						<tr>
							<th>Common Name</th>
							<th>Additional Domains</th>
							<th>Expiration Date</th>
							<th>Days Until Expiration</th>
							<th>Actions</th>
						</tr>
					</thead>
					<tbody>
						{{ if eq (len .Certificates) 0 }}
						<tr>
							<td colspan="5" class="content is-medium has-text-centered p-xxl">
								<h1>No certificates found</h1>
							</td>
						</tr>
						{{ end }}
						{{ range $cert := .Certificates }}
						<tr>
							<td>{{ $cert.CommonName }}</td>
							<td>
								{{ if not (len $cert.AdditionalDomains) }}<i class="fas fa-minus has-text-grey"></i>{{ end }}
								{{ range $i, $domain := $cert.AdditionalDomains }}{{ if $i }}, {{ end }}{{ $domain }}{{ end }}</td>
								
							<td>{{ $cert.Expiration.Format "2006-01-02 15:04:05" }}</td>
							<td {{ if lt $cert.DaysUntil 30 }}class="has-text-danger"{{ end }}>{{ $cert.DaysUntil }}</td>
							<td class="has-text-centered">
								<a href="/admin/server/tls/delete/{{ $cert.DirName }}" class="button is-danger is-small" onclick="return confirm('Are you sure you want to delete this certificate?')">
									<span class="icon"><i class="fas fa-trash"></i></span>
									<span>Delete</span>
								</a>
							</td>
						</tr>
						{{ end }}
					</tbody>
				</table>
			</div>
		</div>
	</div>
</section>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
  (document.querySelectorAll('.notification .delete') || []).forEach(($delete) => {
    const $notification = $delete.parentNode;
    $delete.addEventListener('click', () => {
      $notification.parentNode.removeChild($notification);
    });
  });
});
</script>
{{ end }}


{{ define "server-tls-upload-content" }}
{{ template "nav-sidebar" . }}
<div id="content">
{{ template "navbar-user" . }}
<section class="section dashboard-wrapper p-t-xxl">
	<div class="container">
		{{ template "menu-toggle" . }}
		<div class="columns">
			<div class="column is-8-desktop box">
				<div class="content">
					<h2>Upload TLS Certificate</h2>
					<p>Upload a TLS certificate and its corresponding private key. The certificate will be stored based on its common name.</p>
				</div>
				<form method="POST" action="/admin/server/tls/import" enctype="multipart/form-data">
					{{ if .Error }}
					<div class="notification is-danger">
						<button class="delete"></button>
						{{ .Error }}
					</div>
					{{ end }}
					<div class="field">
						<label class="label">Certificate File (.crt)</label>
						<div class="file">
							<label class="file-label">
								<input class="file-input" type="file" name="cert" accept=".crt,.pem" onchange="javascript:updateFilename(event, this, 'certFilename');">
								<span class="file-cta">
									<span class="file-icon"><i class="fas fa-upload"></i></span>
									<span id="certFilename" class="file-label">Choose certificate file…</span>
								</span>
							</label>
						</div>
					</div>
					<div class="field">
						<label class="label">Private Key File (.key)</label>
						<div class="file">
							<label class="file-label">
								<input class="file-input" type="file" name="key" accept=".key,.pem" onchange="javascript:updateFilename(event, this, 'keyFilename');">
								<span class="file-cta">
									<span class="file-icon"><i class="fas fa-upload"></i></span>
									<span id="keyFilename" class="file-label">Choose private key file…</span>
								</span>
							</label>
						</div>
					</div>
					<div class="has-text-centered m-t-md">
						<button class="button is-info" type="submit">Upload</button>
					</div>
				</form>
			</div>
		</div>
	</div>
</section>
</div>
<script>
function updateFilename(event, sender, id) {
	var dest = document.querySelector("#" + id);
	if (dest) {
		if (sender.files[0]) {
			dest.innerHTML = sender.files[0].name;
		}
	}
}
document.addEventListener('DOMContentLoaded', () => {
  (document.querySelectorAll('.notification .delete') || []).forEach(($delete) => {
    const $notification = $delete.parentNode;
    $delete.addEventListener('click', () => {
      $notification.parentNode.removeChild($notification);
    });
  });
});
</script>
{{ end }}