{% extends "base.html" %}
{% load i18n %}
{% get_current_language as LANGUAGE_CODE %}


{% block content %}
<div class="boxes">
    <div class="contentblock" id="state">
        <h2>{% trans "Virtual machines" %}</h2>
        <ul class="wm-list">
            {% include "box-vmlist.html" %}
            <li id="new-wm-button" class="wm new">
                <div class="summary">
                    <div class="name">{% trans "Start new machine" %}</div>
                    <div class="clear"></div>
                </div>
            </li>
            <li id="new-wm" style="display: none">
            <h2>{% trans "Available templates" %}</h2>
                <p>
                {% trans "Choose one of the following templates to launch." %}
                </p>
                <div class="container">
                    <ul class="wm-list modal">
                        {% for m in templates %}
                        <li class="wm">
                            <div class="summary">
                                <div class="quota">
                                    <div class="used" style="width: 40%"></div>
                                </div>
                                <div class="name wm-on">{{m.name}}</div>
                                <div class="status">
                                    3/10
                                </div>
                                <div class="clear"></div>
                            </div>
                            <div class="details">
                                <div class="details-container">
                                    <ul>
                                        <li class="name">{% trans "System" %}: <span class="value">{{m.disk.name}}</span></li>
                                        <li class="type">{% trans "Size" %}: <span class="value">{{m.instance_type.name}}</span></li>
                                        <li class="memory">{% trans "Memory" %}:
                                            <span class="value">{% blocktrans with m=m.instance_type.RAM %}{{m}} MiB{% endblocktrans %}</span></li>
                                        <li class="cpu">{% trans "CPU cores" %}: <span class="value">{{m.instance_type.CPU}}</span></li>
                                        <li>
                                            &nbsp;
                                            <span class="value">
                                                <form method="POST" action="/vm/new/{{m.pk}}/">{% csrf_token %}
                                                    <input type="submit" value="{% trans "Launch" %}"/>
                                                </form>
                                            </span>
                                            <div class="clear"></div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </li>
                        {% endfor %}
                    </ul>
                </div>
            </li>
            <li class="wm small">
                <div class="summary">
                    <div class="quota">
                        <div class="used" style="background-color: rgba(0,255,0,0.2); width: 30%"></div>
                    </div>
                    <div class="name">{% blocktrans with used=3 all=10 %}Personal quota: {{used}}/{{all}}{% endblocktrans %}</div>
                    <div class="clear"></div>
                </div>
            </li>
        </ul>
    </div>
    <div class="contentblock" id="template">
        <h2>{% trans "My templates" %}</h2>
        <ul class="wm-list">
            <li class="wm">
                <div class="summary">
                    <div class="quota">
                        <div class="used" style="background-color: rgba(0,255,0,0.2); width: 20%"></div>
                    </div>
                    <div class="name">Win7 Matlab</div>
                    <div class="status">2/10</div>
                    <div class="actions">
                        <a href="#" title="{% trans "Rename" %}"><img src="/static/icons/pencil.png" alt="{% trans "Rename" %}" /></a>
                        <a href="#" title="{% trans "Remove" %}"><img src="/static/icons/minus-circle.png" alt="{% trans "Remove" %}" /></a>
                        <a href="#" title="{% trans "Share" %}"><img src="static/icons/user-share.png" alt="{% trans "Share" %}" /></a>
                    </div>
                    <div class="clear"></div>
                </div>
                <div class="details">
                    <ul>
                        <li class="name">{% trans "System" %}: <span class="value">Windows 7 Desktop</span></li>
                        <li class="description">{% trans "Description" %}: <span class="value">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh arcu, cursus et sodales eu, iaculis id metus. Suspendisse et mauris nisi, luctus feugiat nisi. Nullam elementum tincidunt urna a luctus.</span><div class="clear"></div></li>
                        <li class="date">{% trans "Created at" %}: <span class="value">2013.01.10. 13:40:22</span></li>
                        <li class="date">{% trans "Modified at" %}: <span class="value">2013.01.10. 13:40:22</span></li>
                        <li class="count">{% trans "Running instances" %}: <span class="value">1</span></li>
                    </ul>
                </div>
            </li>
            <li class="wm">
                <div class="summary">
                    <div class="quota">
                        <div class="used" style="background-color: rgba(255,128,0,0.2); width: 70%"></div>
                    </div>
                    <div class="name">Win7 Matlab</div>
                    <div class="status">7/10</div>
                    <div class="actions">
                        <a href="#" title="Átnevezés"><img src="/static/icons/pencil.png" alt="rename" /></a>
                        <a href="#" title="Törlés"><img src="/static/icons/minus-circle.png" alt="delete" /></a>
                        <a href="#" title="Megosztás"><img src="static/icons/user-share.png" alt="share" /></a>
                    </div>
                    <div class="clear"></div>
                </div>
                <div class="details">
                    <ul>
                        <li class="name">Rendszer: <span class="value">Windows 7 Desktop</span></li>
                        <li class="description">Leírás: <span class="value">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh arcu, cursus et sodales eu, iaculis id metus. Suspendisse et mauris nisi, luctus feugiat nisi. Nullam elementum tincidunt urna a luctus.</span><div class="clear"></div></li>
                        <li class="date">Létrehozva: <span class="value">2013.01.10. 13:40:22</span></li>
                        <li class="date">Módosítva: <span class="value">2013.01.10. 13:40:22</span></li>
                        <li class="count">Futó példányok: <span class="value">5 db</span></li>
                    </ul>
                </div>
            </li>
            <li class="wm">
                <div class="summary">
                    <div class="quota">
                        <div class="used" style="background-color: rgba(255,0,0,0.2); width: 100%"></div>
                    </div>
                    <div class="name">Win7 Matlab</div>
                    <div class="status">10/10</div>
                    <div class="actions">
                        <a href="#" title="Átnevezés"><img src="/static/icons/pencil.png" alt="rename" /></a>
                        <a href="#" title="Törlés"><img src="/static/icons/minus-circle.png" alt="delete" /></a>
                        <a href="#" title="Megosztás"><img src="static/icons/user-share.png" alt="share" /></a>
                    </div>
                    <div class="clear"></div>
                </div>
                <div class="details">
                    <ul>
                        <li class="name">Rendszer: <span class="value">Windows 7 Desktop</span></li>
                        <li class="description">Leírás: <span class="value">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh arcu, cursus et sodales eu, iaculis id metus. Suspendisse et mauris nisi, luctus feugiat nisi. Nullam elementum tincidunt urna a luctus.</span><div class="clear"></div></li>
                        <li class="date">Létrehozva: <span class="value">2013.01.10. 13:40:22</span></li>
                        <li class="date">Módosítva: <span class="value">2013.01.10. 13:40:22</span></li>
                        <li class="count">Futó példányok: <span class="value">10 db</span></li>
                    </ul>
                </div>
            </li>
            <li class="wm">
                <div class="summary unfinished">
                    <div class="name">Win7 Matlab</div>
                    <div class="status">{% trans "unfinished" %}</div>
                    <div class="actions">
                        <a href="#" title="Átnevezés"><img src="/static/icons/pencil.png" alt="rename" /></a>
                        <a href="#" title="Törlés"><img src="/static/icons/minus-circle.png" alt="delete" /></a>
                    </div>
                    <div class="clear"></div>
                </div>
                <div class="details">
                    <ul>
                        <li class="name">Rendszer: <span class="value">Windows 7 Desktop</span></li>
                        <li class="description">Leírás: <span class="value">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh arcu, cursus et sodales eu, iaculis id metus. Suspendisse et mauris nisi, luctus feugiat nisi. Nullam elementum tincidunt urna a luctus.</span><div class="clear"></div></li>
                        <li class="date">Létrehozva: <span class="value">2013.01.10. 13:40:22</span></li>
                        <li class="date">Módosítva: <span class="value">2013.01.10. 13:40:22</span></li>
                        <li class="count">Futó példányok: <span class="value">8 db</span></li>
                    </ul>
                </div>
            </li>
            <li id="new-template-button" class="wm new">
                <div class="summary">
                    <div class="name">Új Sablon</div>
                    <div class="clear"></div>
                </div>
            </li>
            <li class="wm small">
                <div class="summary">
                    <div class="quota">
                        <div class="used" style="background-color: rgba(0,255,0,0.2); width: 19%"></div>
                    </div>
                    <div class="name">{% blocktrans with used=19 all=100 %}Share quota: {{used}}/{{all}}{% endblocktrans %}</div>
                    <div class="clear"></div>
                </div>
            </li>
        </ul>
    </div>
    {% for box in boxes %}
    {% if forloop.counter0|divisibleby:2 %}
        <div class="contentblock">
            <h2>{{ box.title }}</h2>
            <div class="content">
                {{ box.text|safe }}
            </div>
        </div>
    {% endif %}
    {% endfor %}
</div>
{% include "box-filelist.html" %}
{% endblock %}
