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

<div class="container">
    <div class="row">
        <div class="col-md-9 col-sm-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">Create VM</h3>
                </div>
                <div class="panel-body">
                    {% if limits['disk'] - usage['disk'] <= 0 %}
                        <p>Before you can create any more VMs, you must first delete existing VMs until you have enough disk resources available.</p>
                    {% else %}
                    <div class="form-group">
                        <label for="name">VM Name</label>
                        <input type="text" name="name" id="name" class="form-control">
                    </div>
                    <div class="form-group">
                        <label for="cores">Cores</label>
                        <select name="cores" id="cores" class="form-control">
                            {% for i in range(1, limits['cpu'] + 1) %}
                            <option value="{{ i }}">{{ i }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="mem">Memory</label>
                        <select name="mem" id="mem" class="form-control">
                            {% for i in range(1, limits['mem'] + 1) %}
                            <option value="{{ i  * 1024 }}">{{ i }}GB</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="disk">Disk</label>
                        <input type="number" name="disk" id="disk" class="form-control" min="1" max="{{ limits['disk'] - usage['disk'] }}">
                    </div>
                    <div class="form-group">
                        <label for="iso">ISO</label>
                        <select name="iso" id="iso" class="form-control">
                            <option value="none"></option>
                            {% for iso in isos %}
                            <option value="{{ iso }}">{{ iso }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <button class="btn btn-success" id="create-vm" name="create" data-max_disk="{{ limits['disk'] - usage['disk'] }}">CREATE</button>
                    {% endif %}
                </div>
            </div>
        </div>
        <div class="col-md-3 col-sm-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">Current Usage</h3>
                </div>
                <div class="panel-body">
                    <div class="resource-usage">
                        <div>
                            CPU Cores
                            {% if percents['cpu'] <= 50 %}
                            <div class="c100 p{{ percents['cpu'] }} green">
                            {% elif percents['cpu'] <= 75 %}
                            <div class="c100 p{{ percents['cpu'] }} blue">
                            {% else %}
                            <div class="c100 p{{ percents['cpu'] }} orange">
                            {% endif %}
                                <span>{{ usage['cpu'] }}/{{ limits['cpu'] }}</span>
                                <div class="slice">
                                    <div class="bar"></div>
                                    <div class="fill"></div>
                                </div>
                            </div>
                        </div>
                        <div>
                            Memory (GB)
                            {% if percents['mem'] <= 50 %}
                            <div class="c100 p{{ percents['mem'] }} green">
                            {% elif percents['mem'] <= 75 %}
                            <div class="c100 p{{ percents['mem'] }} blue">
                            {% else %}
                            <div class="c100 p{{ percents['mem'] }} orange">
                            {% endif %}
                                <span>{{ usage['mem'] }}/{{ limits['mem'] }}</span>
                                <div class="slice">
                                    <div class="bar"></div>
                                    <div class="fill"></div>
                                </div>
                            </div>
                        </div>
                        <div>
                            Disk (GB)
                            {% if percents['disk'] <= 50 %}
                            <div class="c100 p{{ percents['disk'] }} green">
                            {% elif percents['disk'] <= 75 %}
                            <div class="c100 p{{ percents['disk'] }} blue">
                            {% else %}
                            <div class="c100 p{{ percents['disk'] }} orange">
                            {% endif %}
                                <span>{{ usage['disk'] }}/{{ limits['disk'] }}</span>
                                <div class="slice">
                                    <div class="bar"></div>
                                    <div class="fill"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{% endblock %}