{% extends "hosting/base_short.html" %}
{% load staticfiles bootstrap3 i18n %}
{% block content %}
<div>
	<div class="virtual-machine-container dashboard-container">
		<div class="row">
			<div class="col-md-9 col-md-offset-2">
                <form method="POST" action="" novalidate class="form-ssh">
                    {% csrf_token %}
                    <div class="page-header">
                        <h1 class="h1-thin"><i class="fa fa-key" aria-hidden="true"></i>&nbsp;{% trans "Add your public SSH key" %}</h1>
                    </div>
                    {% if messages %}
                        <div class="alert alert-warning">
                            {% for message in messages %}
                            <span>{{ message }}</span>
                            {% endfor %}
                        </div>
					{% endif %}
                    {% for field in form %}
                        {% bootstrap_field field %}
                    {% endfor %}
                    {% buttons %}
                    <div class="underform-contaner">
                        <h4>{% trans "Use your created key to access to the VM" %}.</h4>
                        <div class="btn-container">
                            <button type="submit" name="add_ssh" class="btn choice-btn choice-btn-faded">
                                {% trans "Add SSH Key" %}
                            </button>
                        </div>
                    </div>
                    <div class="underform-contaner">
                        <h4>{% trans "Or you can generate a new key pair"%}.</h4>
                        <div class="btn-container">
                            <button type="submit" name="generate" class="btn choice-btn">
                                {% trans "Generate" %}
                            </button>
                        </div>
                    </div>
                    {% endbuttons %}
                </form>

		        {% if private_key %}
    		 		<div class="alert alert-warning">
						<strong>{% trans "Warning!"%}</strong>{% trans "You can download your SSH  private key once. Don't loose your key" %}
    				</div>
    				<div class="form-group">
    				    <textarea class="form-control" rows="6" id="ssh_key" type="hidden" style="display:none">{{private_key}}</textarea>
    				</div>
				{% endif %}
			</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.value], {type: 'text'}));
		a.download = '{{key_name}}.pem';

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

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


</script>
{%endif%}

{% if next_url %}
    <script type="text/javascript">
        window.location.href = '{{next_url}}';
    </script>
{% endif %}

{%endblock%}