{% extends "box/base/box.html" %}
{% load i18n %}
{% load l10n %}
{% load staticfiles %}
{% get_current_language as LANGUAGE_CODE %}

{% block title %}
    {% trans "Virtual machines" %}
{% endblock title %}

{% block boxhelp %}
<div class="boxhelp">
    <div class="help">
        <div class="icon">
            <img class="help" src="{% static "icons/information-frame.png" %}" alt="{% trans "Help" %}" />
        </div>
        <div class="boxhelp-box">
            <p>{% blocktrans %}This is the list of your running virtual machines.{% endblocktrans %}</p>
            <p>{% blocktrans %}You can launch a new VM instance if it is shared by
            a teacher for one of your groups.{% endblocktrans %}</p>
            <p>{% blocktrans %}Please note, that users and shares both have a limit
            of launchable instances.{% endblocktrans %}</p>
        </div>
    </div>
    <div class="icon">
        <img src="" alt="{% trans "Show/hide box" %}" class="toggle-box" data-id="vms" id="toggle-box-vms"/>
    </div>
</div>
{% endblock %}

{% block content %}
<ul class="vm-list entry-list">
    {% if instances %}
        {% for vm in instances %}
            {% include "box/vm/entry.html" %}
        {% endfor %}
    {% elif not just_list_vms %}
    <div class="tooltip">
        <div class="container">
            <p>{% trans "You have not started any machines yet." %}</p>
            <p>
                {% trans "Choose a template, and you can use the system in a minute." %}
            </p>
            <div class="tail"></div>
        </div>
    </div>
    {% endif %}
    {% if not just_list_vms %}
    <li id="new-vm-button" class="entry new small-row">
        <div class="summary">
            <div class="name">{% trans "Start new machine" %}</div>
            <div class="clear"></div>
        </div>
    </li>
    <li id="new-vm" style="display: none">
        <h2>{% trans "Available shares" %}</h2>
        <p>
            {% trans "Choose one of the following shared templates to launch." %}
        </p>
        <div class="container">
            <ul class="vm-list entry-list">
                {% for s in shares %}
                <li class="entry">
                    <div class="summary">
                        <div class="quota">
                            <div class="used" style="width:{% if s.running_shared >=  s.per_user_limit %}100%{% else %}{{ s.get_instance_pc|unlocalize }}%{% endif %}"/>
                            </div>
                        </div>
                        <div class="name wm-on">
                            {{s.name}} - {{ s.group.name }}   ({{ s.running_shared }}/{{ s.per_user_limit }})
                        </div>
                        <div class="status">{{s.get_running}}/{{s.instance_limit}}</div>
                        <div class="clear"></div>
                    </div>
                    <div class="details">
                        <div class="details-container">
                            <ul>
                                <li class="os-{{s.template.os_type}}">
                                    {% trans "System" %}:
                                    <span class="value">{{s.template.system}}</span>
                                    <div class="clear"></div>
                                </li>
                                <li class="type">
                                    {% trans "Size" %}:
                                    <span class="value">
                                        {{s.template.instance_type.name}}
                                        <span class="cpu">{{s.template.instance_type.CPU}}</span>
                                        <span class="memory">{{s.template.instance_type.RAM}}</span>
                                        <span class="credit">{{s.template.instance_type.credit}}</span>
                                    </span>
                                </li>
                                <li class="share-type">
                                    {% trans "Type" %}:
                                    <span class="value">{{s.type }}</span>
                                    ({% if s.get_type.suspend %}
                                    <span class="suspend"
                                        title="{% blocktrans with time=s.get_type.suspend %}Suspend after {{time}}.{%endblocktrans%}">
                                        {{s.get_type.suspendx|timeuntil}}
                                    </span>
                                    {%endif%}{% if s.get_type.delete %}<span class="delete"
                                        title="{% blocktrans with time=s.get_type.delete %}Delete after {{time}}.{%endblocktrans%}">
                                        {{s.get_type.deletex|timeuntil}}</span>{%endif%})
                                </li>
                                <li class="description">
                                    {% trans "Description" %}:
                                    <span class="value">{{s.description}}</span>
                                    <div class="clear"></div>
                                </li>
                                <li>
                                    &nbsp;
                                    <span class="value">
                                        <form method="POST" action="{% url one.views.vm_new share=s.id %}">
                                            {% csrf_token %}
                                            <input {% if  s.running_shared >= s.per_user_limit  or s.get_running >= s.instance_limit%}disabled="disabled" value="{% trans "Quota reached" %}" {%else%}value="{% trans "Launch" %}"{% endif %} type="submit" />
                                        </form>
                                    </span>
                                    <div class="clear"></div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </li>
                {% endfor %}
            </ul>
        </div>
    </li>
    {% endif %}
    <li class="entry small">
        <div class="summary">
            <div class="quota">
                <div class="used" style="background-color: rgba(0,255,0,0.2); width: {{userdetails.get_instance_pc|unlocalize}}%"></div>
            </div>
            <div class="name">
                {% blocktrans with used=userdetails.get_weighted_instance_count all=userdetails.instance_quota %}Personal quota: {{used}}/{{all}}{% endblocktrans %}
            </div>
            <div class="clear"></div>
        </div>
    </li>
</ul>
{% endblock content %}