{{ $hubdata := index $.Site.Data.hub }}
<script>
var formname = "form.hubRequestForm";
var submiturl = "{{ .Site.Params.forms.hub.URI }}";
{{ if .Site.Params.forms.hub.goal }}
var goal = "{{ .Site.Params.forms.hub.goal }}";
{{ end }}
</script>
<section id="hub">
<div class="container"><div class="row">
	<div class="col-lg-12 col-md-12 mt-5 mb-5"><div class="form">
		<div class="col-lg-12 text-center"><h2>HUB Access Request Form</h2></div>
		<div id="sendmessage" style="display:none">Your request has been sent. Thank you!</div>
		<div id="errormessage" style="display:none">Error</div>
		<form role="form" name="hubRequestForm" class="hubRequestForm" id="hubRequestForm" action="" method="post">
			<input type="hidden" name="providercode" id="providercode" value="{{ .File.BaseFileName }}">
			<input type="hidden" name="providername" id="providername" value="{{ .Title }}">
			<div class="form-row">
				<div class="form-group col-lg-6">
					<input type="text" name="name" class="form-control" id="name" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 characters" />
					<div class="validation"></div>
				</div>
				<div class="form-group col-lg-6">
					<input type="email" class="form-control" name="email" id="email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email address" />
					<div class="validation"></div>
				</div>
			</div>
			<div class="form-row">
				<div class="form-group col-lg-6">
					<input type="text" class="form-control" name="companyname" id="companyname" placeholder="Your Company/Project Name" data-rule="minlen:4" data-msg="Please enter your Company Name" />
					<div class="validation"></div>
				</div>
				<div class="form-group col-lg-6">
					<input type="text" class="form-control" name="companyurl" id="companyurl" placeholder="Your Company/Project URL" data-rule="minlen:8" data-msg="Please enter your Company URL" />
					<div class="validation"></div>
				</div>
			</div>
			<div class="form-row">
				<div class="form-group col-lg-6">
					<input type="text" class="form-control" name="projectname" id="projectname" placeholder="Project/Product Name" data-rule="minlen:4" data-msg="Please enter the project name" />
					<div class="validation"></div>
				</div>
				<div class="form-group col-lg-6">
					<input type="text" class="form-control" name="projecturl" id="projecturl" placeholder="Project/Product SCM URL" data-rule="minlen:8" data-msg="Please enter the project URL" />
					<div class="validation"></div>
				</div>
			</div>
			<div class="form-row">
				{{ if .Param "projects" }}
					<div class="form-group col-lg-6">
						What is your project?
						<select id="projecttype" name="projecttype">
						{{ range .Param "projects" }}
							<option value="{{ . }}">{{ . }}</option>
						{{ end }}
						</select>
					</div>
				{{ end }}
				{{ if .Param "systems" }}
					<div class="form-group col-lg-6">
						What POWER system would you like?
						<select id="system" name="system">
						{{ range .Param "systems" }}
							<option value="{{ . }}">{{ . }}</option>
						{{ end }}
						</select>
					</div>
				{{ end }}
				{{ if .Param "provides" }}
					<div class="form-group col-lg-6">
						What POWER resources do you require?
						<select id="provides" name="provides">
						{{ range .Param "provides" }}
							<option value="{{ . }}">{{ . }}</option>
						{{ end }}
						</select>
					</div>
				{{ end }}
				{{ if .Param "addons" }}
					<div class="form-group col-lg-6">
						What POWER addons do you require?
						<select id="addons" name="addons">
						{{ range .Param "addons" }}
							<option value="{{ . }}">{{ . }}</option>
						{{ end }}
						</select>
					</div>
				{{ end }}
				{{ if .Param "operatingsystems" }}
					<div class="form-group col-lg-6">
						What Operating System would you like on your POWER resource?
						<select id="operatingsystem" name="operatingsystem">
						{{ if .Param "operatingsystems.available.standard" }}
						{{ range .Param "operatingsystems.available.standard" }}
							<option value="{{ . }}">{{ . }}</option>
						{{ end }}
						{{ end }}
						{{ if .Param "operatingsystems.available.gpuenabled" }}
						{{ range .Param "operatingsystems.available.gpuenabled" }}
							<option value="{{ . }}">{{ . }} (GPU-enabled)</option>
						{{ end }}
						{{ end }}
						</select>
					</div>
				{{ end }}

				{{ if .Param "opnstkflavors" }}
					<div class="form-group col-lg-6">
						What instance flavor  would you like?
						<select id="opnstkflavor" name="opnstkflavor">
						{{ if .Param "opnstkflavors.standard" }}
                                                {{ range .Param "opnstkflavors.standard" }}
                                                        <option value="{{ .name }}">{{ .cpus }} CPUs,  {{ .memory }}GB RAM, {{ .disk }}GB Disk</option>
                                                {{ end }}
                                                {{ end }}
                                                {{ if .Param "opnstkflavors.gpuenabled" }}
                                                {{ range .Param "opnstkflavors.gpuenabled" }}
                                                        <option value="{{ .name }}">{{ .cpus }} CPUs,  {{ .memory }}GB RAM,  {{ .gpus }} GPUs,  {{ .disk }}GB Disk</option>
                                                {{ end }}
                                                {{ end }}
						</select>
					</div>
				{{ end }}
				<div class="form-group col-lg-6">
					SSH Public Key File Upload : <input type="file" name="sshpubkeyupload" id="sshpubkeyupload" class="file" placeholder="Select your Public SSH Key File" onChange="getFileContents()" accept=".pub"><br>
					<input type="hidden" name="sshpubkey" id="sshpubkey" value="">
					<span class="comment">Please only add your public ssh key file (ending on <u>.pub</u>)</span>
				</div>
			</div>
			<div class="form-group">
				<textarea class="form-control" name="message" rows="5" data-rule="required" data-msg="Please write a short explanation about getting access. (Why, How, Whatfor, how long)" placeholder="Please write a short explanation about getting access. (Why, How, Whatfor, how long)"></textarea>
				<div class="validation"></div>
			</div>
			<div class="text-center"><button class="btn btn-outline-primary" type="submit" title="Send Message">Request your resource</button></div>
		</form>
	</div></div>
</div></div>
</section>
<script>
function getFileContents() {
	const reader = new FileReader()
	reader.onload = handleFileLoad;
	reader.readAsText(event.target.files[0])
}
function handleFileLoad(event) {
	document.getElementById('sshpubkey').value = event.target.result;
}
</script>