{% extends "base.html" %}
{% block body %}

<div class="container">
    <div class="row">
        <div class="col-md-3 col-md-push-9 col-sm-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">Actions</h3>
                </div>
                <div class="panel-body">
                    {% if vm['qmpstatus'] == 'stopped' %}
                    {% if not usage_check %}
                    <button class="btn btn-success proxstar-actionbtn" id="start-vm" name="start" data-vmid="{{ vm['vmid'] }}" data-vmname="{{ vm['name'] }}">START</button>
                    {% else %}
                    Insufficient resources to start VM.
                    {% endif %}
                    {% endif %}
                    {% if vm['qmpstatus'] == 'paused' %}
                    <button class="btn btn-success proxstar-actionbtn" id="resume-vm" name="resume" data-vmid="{{ vm['vmid'] }}" data-vmname="{{ vm['name'] }}">RESUME</button>
                    {% endif %}
                    {% if vm['qmpstatus'] == 'running' or vm['qmpstatus'] == 'paused' %}
                    <button class="btn btn-info proxstar-actionbtn" id="shutdown-vm" name="shutdown" data-vmid="{{ vm['vmid'] }}" data-vmname="{{ vm['name'] }}">SHUTDOWN</button>
                    {% if vm['qmpstatus'] == 'running' %}
                    <button class="btn btn-info proxstar-actionbtn" id="suspend-vm" name="suspend" data-vmid="{{ vm['vmid'] }}" data-vmname="{{ vm['name'] }}">SUSPEND</button>
                    {% endif %}
                    <button class="btn btn-warning proxstar-actionbtn" id="stop-vm" name="stop" data-vmid="{{ vm['vmid'] }}" data-vmname="{{ vm['name'] }}">STOP</button>
                    <button class="btn btn-warning proxstar-actionbtn" id="reset-vm" name="reset" data-vmid="{{ vm['vmid'] }}" data-vmname="{{ vm['name'] }}">RESET</button>
                    {% endif %}
                    {% if vm['qmpstatus'] == 'stopped' %}
                    <button class="btn btn-danger proxstar-actionbtn" id="delete-vm" name="delete" data-vmid="{{ vm['vmid'] }}" data-vmname="{{ vm['name'] }}">DELETE</button>
                    {% else %}
                    To delete VM, power it off.
                    {% endif %}
                </div>
            </div>
        </div>
        <div class="col-md-3 col-md-pull-3 col-sm-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">Resources</h3>
                </div>
                <div class="panel-body">
                    <ul class="nav nav-list">
                        <li class="nav-header">Interfaces</li>
                        {% for interface in vm['interfaces'] %}
                        <li>{{ interface[0] }}: {{ interface[1] }}</li>
                        {% endfor %}
                        <li class="nav-header">Disks</li>
                        {% for disk in vm['disks'] %}
                        <li>{{ disk[0] }}: {{ disk[1] }}GB</li>
                        {% endfor %}
                        <li class="nav-header">ISO</li>
                        <li>
                            {{ vm['iso'] }}
                            {% if vm['iso'] != 'None' %}
                            <button class="btn btn-danger proxstar-ejectbtn" id="eject-iso" name="eject" data-vmid="{{ vm['vmid'] }}" data-iso="{{ vm['iso'] }}">
                                <span class="glyphicon glyphicon-eject"></span>
                            </button>
                            {% endif %}
                            <button class="btn btn-default proxstar-changebtn" id="change-iso" name="change" data-vmid="{{ vm['vmid'] }}" data-iso="{{ vm['iso'] }}">
                                <span class="glyphicon glyphicon-cog"></span>
                            </button>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-md-pull-3 col-sm-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">VM Details</h3>
                </div>
                <div class="panel-body">
                    <dl class="dl-horizontal">
                        <dt>Name</dt>
                        <dd>{{ vm['name'] }}</dd>
                        <dt>DNS Name</dt>
                        <dd>{{ vm['name'] }}.csh.rit.edu</dd>
                        <dt>ID</dt>
                        <dd>{{ vm['vmid'] }}</dd>
                        <dt>Status</dt>
                        <dd>{{ vm['qmpstatus'] }}</dd>
                        <dt>Cores</dt>
                        <dd>
                            {{ vm['config']['cores'] * vm['config'].get('sockets', 1) }}
                            {% if vm['qmpstatus'] == 'running' or vm['qmpstatus'] == 'paused' %}
                            <button class="btn btn-default proxstar-changebtn" id="change-cores" data-vmid="{{ vm['vmid'] }}" data-cores="{{ vm['config']['cores'] * vm['config'].get('sockets', 1) }}" data-usage="{{ usage['cpu'] - (vm['config']['cores'] * vm['config'].get('sockets', 1)) }}" data-limit="{{ limits['cpu'] }}">
                                <span class="glyphicon glyphicon-cog"></span>
                            </button>
                            {% else %}
                            <button class="btn btn-default proxstar-changebtn" id="change-cores" data-vmid="{{ vm['vmid'] }}" data-cores="{{ vm['config']['cores'] * vm['config'].get('sockets', 1) }}" data-usage=0 data-limit="{{ limits['cpu'] }}">
                                <span class="glyphicon glyphicon-cog"></span>
                            </button>
                            {% endif %}
                        </dd>
                        <dt>Memory</dt>
                        <dd>
                            {{ vm['config']['memory'] // 1024 }}GB
                            {% if vm['qmpstatus'] == 'running' or vm['qmpstatus'] == 'paused' %}
                            <button class="btn btn-default proxstar-changebtn" id="change-mem" data-vmid="{{ vm['vmid'] }}" data-mem="{{ vm['config']['memory'] // 1024 }}" data-usage="{{ usage['mem'] - vm['config']['memory'] // 1024 }}" data-limit="{{ limits['mem'] }}">
                                <span class="glyphicon glyphicon-cog"></span>
                            </button>
                            {% else %}
                            <button class="btn btn-default proxstar-changebtn" id="change-mem" data-vmid="{{ vm['vmid'] }}" data-cores="{{ vm['config']['memory'] // 1024 }}" data-usage=0 data-limit="{{ limits['mem'] }}">
                                <span class="glyphicon glyphicon-cog"></span>
                            </button>
                            {% endif %}
                        </dd>
                        <dt>Expiration</dt>
                        <dd>
                            {{ vm['expire'] }}
                            <button class="btn btn-success proxstar-renewbtn" id="renew-vm" name="renew" data-vmid="{{ vm['vmid'] }}" data-vmname="{{ vm['name'] }}">
                                <span class="glyphicon glyphicon-plus"></span>
                            </button>
                        </dd>
                    </dl>
                </div>
            </div>
        </div>
    </div>
</div>

{% endblock %}