{{ define "header" }}
<h1>Cluster - {{ .Cluster.Name }}</h1>
{{ end }}

{{ define "content" }}
{{ $c := .Cluster }}
<form action="/clusters/{{ $c.Name }}/remove" method="POST">
	<button type="submit" name="remove-cluster">remove cluster</button>
</form>
<form action="/clusters/{{ $c.Name }}/servers" method="POST" autocomplete="off">
	<details class="dropdown">
		<summary id="type">{{- if $c.Controllers -}}worker{{- else -}}controller{{- end -}}</summary>
		<ul>
			{{- if $c.Controllers -}}
			<li>
				<label>
					<input type="radio" name="type" value="worker" oninput="serverTypeSelected(this)" checked />
					worker
				</label>
			</li>
			{{- end -}}
			<li>
				<label>
					<input type="radio" name="type" value="controller" oninput="serverTypeSelected(this)" {{- if not $c.Controllers -}}checked{{- end -}}/>
					controller
				</label>
			</li>
		</ul>
	</details>
	<input type="text" name="ip" placeholder="ip" />
	<input type="text" name="port" placeholder="22 (optional)" />
	<input type="text" name="user" placeholder="user" />
	<input type="password" name="password" placeholder="password" />
	<button type="submit" name="add-server">add server</button>
</form>
{{- if $c.StorageEnabled }}
Supports persistent storage<br/>
{{- else }}
<form action="/clusters/{{ $c.Name }}/setup-storage" method="POST">
	<button type="submit" name="remove-cluster">setup persistent storage</button>
</form>
{{- end }}
<table class="striped">
	<thead>
		<tr>
			<th scope="col">type</th>
			<th scope="col">hostname</th>
			<th scope="col">ip</th>
			<th scope="col">remove</th>
		</tr>
	</thead>
	<tbody>
		{{ range $s := $c.Controllers }}
		<tr>
			<th>controller</th>
			<th scope="row">{{ $s.Name }}</th>
			<td>{{ $s.IP }} </td>
			<td>
				<form action="/clusters/{{ $c.Name }}/servers/{{ $s.Name }}/remove" method="POST">
					<button type="submit">remove</button>
				</form>
			</td>
		</tr>
		{{ end }}
		{{ range $s := $c.Workers }}
		<tr>
			<th>worker</th>
			<th scope="row">{{ $s.Name }}</th>
			<td>{{ $s.IP }} </td>
			<td>
				<form action="/clusters/{{ $c.Name }}/servers/{{ $s.Name }}/remove" method="POST">
					<button type="submit">remove</button>
				</form>
			</td>
		</tr>
		{{ end }}
	</tbody>
</table>
<script type="text/javascript">
 function serverTypeSelected(elem) {
	 let summary = elem.closest("details").querySelector("summary");
	 summary.innerHTML = elem.getAttribute("value");
	 summary.parentNode.removeAttribute("open");
 }
</script>
{{ end }}
