{% extends "hosting/base_short.html" %}
{% load staticfiles bootstrap3 %}
{% block content %} 
<div>
	<div class="container virtual-machine-container dashboard-container ">
		<div class="row">
			<div class="col-md-9 col-md-offset-2">
				 <div  class="col-sm-12">

				        <h3><i class="fa fa-key" aria-hidden="true"></i> SSH Private Key</h3>
				        <hr/>	
				        {% if private_key %}
				 		<div class="alert alert-warning">
  							<strong>Warning!</strong> You can view your SSH  private key once. Copy it or if it wasn't downloaded automatically, just click on Download to start it. 
						</div>
						<div class="form-group">
						  <label for="comment">private_key.pem</label>
						  <textarea class="form-control" rows="6" id="ssh_key">{{private_key}}</textarea>

						</div>
							<div  class="form-group pull-right">
								<button type="button" id="copy_to_clipboard" data-clipboard-target="#ssh_key" class="btn btn-warning"
									data-toggle="tooltip"  data-placement="bottom" title="Copied"  data-trigger="click">Copy to Clipboard</button>
								<button type="button" id="download_ssh_key" class="btn btn-warning">Download</button>  
							</div>				        
						{% else %}
					 		<div class="alert alert-warning">
	  							<strong>Warning!</strong> Your SSH private key was already generated and downloaded, if you lost it, contact us. 
							</div>
						{% endif %}
						<a class="btn btn-success" href="{% url 'hosting:virtual_machines' virtual_machine.id %}"> Go to my Virtual Machine Dashboard</a>
						<div class="clearfix"></div>
				</div>
			</div>

	    </div>
	</div>
</div>

{% if private_key %}
<!-- Force to download ssh key on page load -->
<script type="text/javascript"> 

		var key = window.document.getElementById('ssh_key');
		var a = window.document.createElement('a');

		a.href = window.URL.createObjectURL(new Blob(['key'], {type: 'text'}));
		a.download = 'private_key.pem';

		// Append anchor to body.
		document.body.appendChild(a);
		a.click();

		// Remove anchor from body
		document.body.removeChild(a);

</script>
{%endif%}


{%endblock%}