{% extends "base.html" %}

{% block body %}

    <div class="row">
        <div class="column">
            <h5>{{ host | shortname }} (<a href="{{ cluster | cluster_url }}">{{ cluster }}</a>)</h5>
        </div>
    </div>
    <div class="row">
        <div class="column column-30">
            <table>
                <thead>
                    <tr><th>Name</th><th>Status</th></tr>
                </thead>
                <tbody>
                {% for vm in slots['allocated'] %}
                    <tr>
                        <td><a href="{{ vm['name'] | vm_url }}">{{ vm['name'] }}</a></td>
                        <td>
                            {% if vm['online'] %}
                                {% if vm['active'] %}
                                    <div class="online">Active</div>
                                {% else %}
                                    <div class="unknown">Online</div>
                                {% endif %}
                            {% else %}
                                <div class="offline">Offline</div>
                            {% endif %}
                    </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>

        <div class="column column-3"></div>

        <div class="column column-66">
            <table>
                <thead>
                    <tr><th>Resource</th><th>Available</th></tr>
                </thead>
                <tbody>
                    <tr><th>Memory</th><th>{{ (mem['left'] / 1024**3) | round }} GB</th></tr>
                    <tr><th>Cpu</th><th>{{ cpu['left'] }}</th></tr>
                    <tr><th>Slots</th><th>{{ slots['left'] | length}}</th></tr>
                </tbody>
            </table>

            <form>
                <label for="input-name">Name</label>
                <input id="input-name">
                <label for="input-mem">Memory (GB)</label>
                <input id="input-mem">
                <label for="input-cpu">Cpu (percent)</label>
                <input id="input-cpu">
                <label for="input-ttl">Ttl (seconds)</label>
                <input id="input-ttl">
                <br>
                <div class="button" id="allocate-btn">Allocate</div>
            </form>

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

        </div>
    </div>

    <script type="text/javascript">
        var ports = {{ slots['left'] }};
        $('#allocate-btn').on('click', function() {
            if (!ports.length) {
                $('#register-error').text('no slots available');
                return;
            }
            var body = {
                name: $('#input-name').val(),
                mem: parseInt($('#input-mem').val()) * 1024 * 1024 * 1024,
                cpu: parseInt($('#input-cpu').val()),
                ttl: parseInt($('#input-ttl').val()),
                host: '{{ host }}',
                port: ports[0],
                cluster: '{{ cluster }}'
            };
            var xhr = new XMLHttpRequest();
            xhr.open("post", "/control/on_demand/allocate", true);
            xhr.onload = function () {
                console.log(xhr);
                if (xhr.status == 200) {
                    window.location.replace('{{ host | host_url }}');
                } else {
                    $('#register-error').text(xhr.response);
                }
            };
            console.log(JSON.stringify(body));
            xhr.send(JSON.stringify(body));
        })
    </script>

{% endblock %}