{% extends "base.html" %}

{% block body %}
        <div class="row">
            <div class="column">
                <h2>
                <strong id="vm-name">{{ name }}</strong>
                {% if online %}
                <span class="online" id="vm-state">@online</span>
                {% else %}
                <span class="offline" id="vm-state">@offline</span>
                {% endif %}
                </h2>

                <table>
                    <tbody>
                        <tr><th>State</th><th>{{ state }}</th></tr>
                        <tr><th>DNS name</th><th><a href="http://{{ dns_name }}">{{ dns_name }}</a></th></tr>
                        <tr><th>Host name</th><th><a href="{{ host | host_url }}">{{ host }}</a></th></tr>
                        <tr><th>Cluster</th><th><a href="{{ cluster | cluster_url }}">{{ cluster }}</a></th></tr>
                        <tr><th>CPU limit</th><th>{{ cpu }}</th></tr>
                        <tr><th>Memory limit</th><th>{{ (mem / (1024.0 ** 3)) | round | string + ' GB' }}</th></tr>
                        <tr><th>Live till</th><th>{{ live_till | strftime }} ({{ live_till | days_remain }} left)</th></tr>
                    </tbody>
                </table>
            </div>
        </div>

        <br>
        <div class="row">
            <div class="column-33">
                <h4>ttl settings</h4>
                <form>
                    <label for="ttl-delta">ttl delta (in seconds)</label>
                    <input id="ttl-delta">
                    <br>
                    <div class="button" id="prolong-btn">Prolong</div>
                </form>
            </div>
        </div>

        <div id="action-error"></div>
        <div id="action-error"></div>


    <script type="text/javascript">
        $('#prolong-btn').on('click', function() {
            var body = {
                ttl: parseInt($('#ttl-delta').val())
            };
            var xhr = new XMLHttpRequest();
            xhr.open("post", "/control/on_demand/vm/{{ name }}/prolong", true);
            xhr.onload = function () {
                console.log(xhr);
                if (xhr.status == 200) {
                    window.location.replace('{{ name | vm_url }}');
                } else {
                    $('#action-error').text(xhr.response);
                }
            };
            console.log(JSON.stringify(body));
            xhr.send(JSON.stringify(body));
        })
    </script>

{% endblock %}