{% 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 full_limits %}
                        <p>You have reached your limit for the following resources:</p>
                        {% for limit in full_limits %}
                        <p><strong>{{ limit }}</strong></p>
                        {% endfor %}
                        <p>Before you can create any more VMs, you must first either power off (CPU/Memory) or delete (Disk) existing VMs until you have enough resources available.</p>
                    {% else %}
                    <form action="create" method="post">
                        <div class="form-group">
                            <label for="name">VM Name</label>
                            <input type="text" name="name" class="form-control">
                        </div>
                        <div class="form-group">
                            <label for="cores">Cores</label>
                            <select name="cores" class="form-control">
                                {% for i in range(1, 4 - usage['cpu'] + 1) %}
                                <option value="{{ i }}">{{ i }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="memory">Memory</label>
                            <select name="memory" class="form-control">
                                {% for i in range(1, 4 - usage['mem'] + 1) %}
                                <option value="{{ i  * 1024 }}">{{ i }}GB</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="disk">Disk</label>
                            <input type="text" name="disk" class="form-control">
                        </div>
                        <div class="form-group">
                            <label for="iso">ISO</label>
                            <select name="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" type="submit" value="Create">Create</button>
                    </form>
                    {% 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 %}