{% extends "base.html" %}
{% block title %}Deploy a server{% endblock %}

{% block scripts %}
{{ super() }}
<script>
function cpuUpdate(value) {
    $('#selected-cpu').html('<h3>' + value + ' cores</h3>');
    //for (i = 0; i < value; i++) {
    //    cpuimg += 'x';
    //}
    //$('#selected-cpu').html('test ' + cpuimg);
}

function memoryUpdate(value) {
    $('#selected-memory').html('<h3>' + value + ' MB</h3>');
}

function storageUpdate(value) {
    $('#selected-storage').html('<h3>' + value + ' GB</h3>');
}

</script>

{% endblock %}

{% block page_content %}
<center><h2>Deploy new Server</h2></center>
<div class="row">
<form method="POST" action="{{ url_for('panel.deploy') }}">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">1. Location</div>
<div class="panel-body">
<p>
    {{ form.region.label }}<br /> {{ form.region }}<br />
    {% for error in form.region.errors %}
        {{ error }}<br />
    {% endfor %}
</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">2. Image</div>
<div class="panel-body">
<p>
    {{ form.recipe.label }}<br /> {{ form.recipe }}<br />
    {% for error in form.recipe.errors %}
        {{ error }}<br />
    {% endfor %}
</p>
</div>
</div>
</div>
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">3. Size</div>
<div class="panel-body">
<div class="col-md-4">
<p>
    {{ form.cpu.label }}
    {{ form.cpu(min=2, max=8, step=2, oninput="cpuUpdate(value)") }}
    <center><output for="cpu" id="selected-cpu"><h3>{{ form.cpu.data }} cores</h3></output></center>
    {% for error in form.cpu.errors %}
        {{ error }}<br />
    {% endfor %}
</p>
</div>

<div class="col-md-4">
<p>
    {{ form.memory.label }}<br /> {{ form.memory(min=1024, max=8192, step=512, oninput="memoryUpdate(value)") }}
    <center><output for="memory" id="selected-memory"><h3>{{ form.memory.data }} MB</h3></output></center>
    {% for error in form.memory.errors %}
        {{ error }}<br />
    {% endfor %}
</p>
</div>

<div class="col-md-4">
<p>
    {{ form.storage.label }}<br /> {{ form.storage(min=20, max=240, step=20, oninput="storageUpdate(value)") }}
    <center><output for="storage" id="selected-storage"><h3>{{ form.storage.data }} GB</h3></output></center>
    {% for error in form.storage.errors %}
        {{ error }}<br />
    {% endfor %}
</p>
</div>

</div>
</div>
</div>
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">4. Server Hostname</div>
<div class="panel-body">
<p>
    {{ form.alias.label }}<br /> {{ form.alias }}<br />
    {% for error in form.alias.errors %}
        {{ error }}<br />
    {% endfor %}
</p>
</div>
</div>
</div>

<center>
<p>
    {{ form.csrf_token() }}
    {{ form.submit }}
</p>
</center>


</div>
{% endblock %}