{% 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> Private Key</h3>
				        <hr/>	
						<div class="form-group">
						  <label for="comment">private_key.pem</label>
						  <textarea class="form-control" rows="8" id="ssh_key">{{private_key}}</textarea>
						  <span class="h3 pull-right"><button type="button" class="btn btn-default"><a href=""> Download </a></button></span>  
						   <span class="h3 pull-right"><button type="button" data-clipboard-target="#ssh_key" class="btn btn-default">Copy to Clipboard</button></span> 
						</div>
				        <div class="clearfix"></div>
				</div>
			</div>

	    </div>
	</div>

</div>
<script type="text/javascript"> 
     (function () {new Clipboard('.btn');})();
</script>
{%endblock%}