{{ define "user-info-content" }}
{{ template "nav-sidebar" . }}
<div id="content">
{{ template "navbar-user" . }}
<section class="section dashboard-wrapper p-t-xxl">
	<div class="content is-medium">
		{{ if len .User.Fullname }}
		<h1>User details for {{ .User.Fullname }}</h1>
		<h3>{{ .User.Email }}</h3>
		{{ else }}
		<h1>User details for {{ .User.Email }}</h1>
		{{ end }}
	</div>
	<!-- user info and plan information -->
	<div class="box m-t-lg">
		<div class="columns">
			<div class="column is-12-mobile is-8-tablet">
				<div>
					<div class="field is-horizontal">
						<div class="field-label is-normal">
							<label>Fullname</label>
						</div>
						<div class="field-body">
							<input disabled class="input" type="text" name="fullname" value="{{ .User.Fullname }}">
						</div>
					</div>
					<div class="field is-horizontal">
						<div class="field-label is-normal">
							<label>Email</label>
						</div>
						<div class="field-body">
							<input disabled class="input" type="text" name="email" value="{{ .User.Email }}">
						</div>
					</div>
					<div class="field is-horizontal">
						<div class="field-label is-normal">
							<label>Cell Phone</label>
						</div>
						<div class="field-body">
							<input disabled class="input" type="tel" name="mobile" value="{{ .User.Phone }}">
						</div>
					</div>
					<div class="field is-horizontal">
						<div class="field-label is-normal">
							<label>Created</label>
						</div>
						<div class="field-body">
							<input disabled class="input" type="text" value="{{ .User.Created.Format "Jan 2, 2006" }}">
						</div>
					</div>
					<div class="field is-horizontal">
						<div class="field-label is-normal">
							<label>Active</label>
						</div>
						<div class="field-body">
							<input disabled class="input" type="text" value="{{ if .User.Active }}True{{ else }}False{{ end }}">
						</div>
					</div>
					<div class="field is-horizontal">
						<div class="field-label is-normal">
							<label>Scope</label>
						</div>
						<div class="field-body">
							<input disabled class="input" type="text" value="{{ if .User.IsAdmin }}Admin{{ else }}Basic{{ end }}">
						</div>
					</div>
					<div class="field is-horizontal">
						<div class="field-label is-normal">
							<label>Bandwidth</label>
						</div>
						<div class="field-body">
							<input disabled class="input" type="text" name="bandwidth" value="{{ .User.Bandwidth }}">
						</div>
					</div>
					<div class="field is-horizontal">
						<div class="field-label">
							<label>Max Bandwidth</label>
						</div>
						<div class="field-body">
							<input disabled type="checkbox" name="maxBandwidth" {{ if .User.MaxBandwidth }}checked{{ end }}>
						</div>
					</div>
					<div class="field is-horizontal">
						<div class="field-label">
							<label>Check Domains</label>
						</div>
						<div class="field-body">
							<input disabled type="checkbox" name="checkDomains" {{ if .User.CheckDomains }}checked{{ end }}>
						</div>
					</div>
					<div class="field is-horizontal">
						<div class="field-label">
							<label>Custom Ports</label>
						</div>
						<div class="field-body">
							<input disabled type="checkbox" name="customPorts" {{ if .User.CustomPorts }}checked{{ end }}>
						</div>
					</div>
					<div class="field is-horizontal">
						<div class="field-label">
							<label>Check Ports</label>
						</div>
						<div class="field-body">
							<input disabled type="checkbox" name="checkPorts" {{ if .User.CheckPorts }}checked{{ end }}>
						</div>
					</div>
					<div class="field is-horizontal">
						<div class="field-label is-normal">
							<label>Max Ports</label>
						</div>
						<div class="field-body">
							<input disabled class="input" type="text" name="maxPorts" value="{{ .User.MaxPorts }}">
						</div>
					</div>
					<br>
					<div class="field">
						<a class="button is-info" href="/admin/user/edit/{{ .User.ID.String }}">Edit</a>&nbsp;&nbsp;
						<a class="button is-danger" target="_blank"
							onclick="javascript:confirmUserPurge(event, this);"
							href="/admin/user/purge/{{ .User.ID.String }}">
							<span class="icon"><i class="fas fa-trash"></i></span>
							<span>Purge</span>
						</a>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- tunnels -->
	<h2 class="is-size-2 has-text-centered m-t-lg m-b-lg">Tunnels</h2>
	{{ template "admin-tunnel-list" . }}

	<h2 id="domains" class="is-size-2 has-text-centered m-t-lg m-b-lg">Domains</h2>
	{{ template "admin-domain-list" . }}
	{{ template "admin-edit-domain-dialog" . }}
</section>
{{ template "menu-toggle" . }}
</div>
{{ template "purge-user-dialog" . }}
{{ end }}

{{ define "purge-user-dialog" }}
<script>
function confirmUserPurge(event, sender) {
	event.preventDefault();
	var dialog = document.querySelector("#userPurgeConfirm");
	if (isValid(dialog)) {
		dialog.classList.toggle("is-active");
	}
}
</script>
<div id="userPurgeConfirm" class="modal">
    <div class="modal-background"></div>
    <div class="modal-card">
        <header class="modal-card-head">
            <p class="modal-card-title">Purge User</p>
            <button class="delete" aria-label="close" onclick="javascript:cancelUserPurge(event, this);"></button>
        </header>
        <section class="modal-card-body">
        	<p>This operation will remove and archive the user and shutdown all of their active tunnels.  Are you sure?</p>
        </section>
        <footer class="modal-card-foot">
            <button class="button is-success" onclick="javascript:acceptUserPurge(event, this);">Yes</button>
            <button class="button" onclick="javascript:cancelUserPurge(event, this);">Cancel</button>
        </footer>
    </div>
</div>
<script>
function cancelUserPurge(event, sender) {
	var dialog = document.querySelector("#userPurgeConfirm");
	if (isValid(dialog)) {
		dialog.classList.toggle("is-active");
	}
}

function acceptUserPurge(event, sender) {
	var dialog = document.querySelector("#userPurgeConfirm");
	if (isValid(dialog)) {
		dialog.classList.toggle("is-active");
	}
	window.location = "/admin/user/purge/{{ .User.ID.String }}";
}
</script>
{{ end }}

{{ define "admin-domain-list" }}
<div class="columns">
	<div class="column">
		<div class="buttons is-right">
			<button class="button is-light" onclick="javascript:editDomain(event, this);">
				<span class="icon"><i class="fas fa-plus"></i></span>
				<span>Add Domain</span>
			</button>
		</div>
	</div>
</div>
<table class="table is-fullwidth is-bordered">
	<thead class="grey">
		<tr>
			<th>Domain</th>
			<th colspan="2">Last Updated</th>
		</tr>
	</thead>
	<tbody>
		{{ if eq (len .Domains) 0 }}
		<tr>
			<td colspan="3" class="content is-medium has-text-centered p-xxl">
				<h1>No domains associated to the user.</h1>
			</td>
		</tr>
		{{ end }}
		{{ range $domain := .Domains }}
		<tr>
			<td>{{ $domain.Name }}</td>
			<td>{{ $domain.Created.Format "Jan 2, 15:04:05 2006" }}</td>
			<td class="is-narrow has-text-centered">
				<form method="POST" action="/admin/user/domain/remove">
					<input type="hidden" name="domain" value="{{ $domain.ID.String }}">
					<button class="button is-small is-danger" onclick="javascript:removeUserDomain(event, this);">Remove</button>
				</form>
			</td>
		</tr>
		{{ end }}
	</tbody>
</table>
{{ template "admin-remove-domain-dialog" . }}
<script>
var removeDomain = null;

function removeUserDomain(event, sender) {
	event.preventDefault();
	if (isValid(sender)) {
		removeDomain = sender.parentNode;
	}

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

{{ define "admin-remove-domain-dialog" }}
<div id="removeDomainConfirm" class="modal">
    <div class="modal-background"></div>
    <div class="modal-card">
        <header class="modal-card-head">
            <p class="modal-card-title">Remove Domain</p>
            <a class="delete" aria-label="close"
            	onclick="javascript:cancelRemoveDomain(event, this);"></a>
        </header>
        <section class="modal-card-body">
            <p>This operation will remove the domain association to this user.  This will prevent future requests for traffic to this domain and its subdomains.</p>
            <p>Do you want to continue?</p>
        </section>
        <footer class="modal-card-foot">
            <a class="button is-success" onclick="javascript:acceptRemoveDomain(event, this);">Yes</a>
            <a class="button" onclick="javascript:cancelRemoveDomain(event, this);">Cancel</a>
        </footer>
    </div>
</div>
<script>
function cancelRemoveDomain(event, sender) {
    var dialog = document.querySelector("#removeDomainConfirm");
    if (isValid(dialog)) {
    	dialog.classList.toggle("is-active");
    }

    removeDomain = null;
}

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

    removeDomain.submit();
}
</script>
{{ end }}

{{ define "admin-edit-domain-dialog" }}
<div id="editDomain" class="modal">
    <div class="modal-background"></div>
    <div class="modal-card">
        <header class="modal-card-head">
            <p class="modal-card-title">Add New Domain</p>
            <a class="delete" aria-label="close"
            	onclick="javascript:hideDomainForm(event, this);"></a>
        </header>
        <section class="modal-card-body">
        	<form id="editDomainForm" method="POST" action="/admin/user/domain/add">
        		<input type="hidden" name="user" value="{{ .User.ID.String }}">
				<label>Domain Name</label>
				<div class="field">
					<div class="control">
						<input id="domain" class="input" type="text" name="domain" value="" placeholder="Valid domain, e.g. example.com or sub.example.com">
					</div>
				</div>
        	</form>
        </section>
        <footer class="modal-card-foot">
            <a class="button is-success" onclick="javascript:submitDomainForm(event, this);">Submit</a>
            <a class="button" onclick="javascript:hideDomainForm(event, this);">Cancel</a>
        </footer>
    </div>
</div>
<script>
function editDomain(event, sender) {
	event.preventDefault();

	if (!isValid(sender)) {
		return
	}

	var dialog = document.querySelector("#editDomain");
	if (isValid(dialog)) {
		dialog.classList.toggle("is-active");
	}

	// Clear the domain input line.
	var inputLine = dialog.querySelector("#domain")
	inputLine.value = "";
}

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

function submitDomainForm(event, sender) {
    var domainEditForm = document.querySelector("#editDomainForm");
    if (!isValid(domainEditForm)) {
    	return
    }

    domainEditForm.submit();
}
</script>
{{ end }}