{% extends "base.html" %}
{% load i18n %}

{% block content %}
<div class="boxes">
    <div class="contentblock" id="state">
        <h2>Virtuális gépek</h2>
        <ul class="wm-list">
            {% include "box-vmlist.html" %}
            <li id="new-wm-button" class="wm new">
                <div class="summary">
                    <div class="name">Új gép indítása</div>
                    <div class="clear"></div>
                </div>
            </li>
            <li id="new-wm" style="display: none">
                <h2>Rendelkezésre álló sablonok</h2>
                <div class="container">
                    <ul class="wm-list modal">
                        {% for m in templates %}
                        <li class="wm">
                            <form method="POST" action="/vm/new/{{m.pk}}/">{% csrf_token %}
                                <div class="summary">
                                    <div class="name wm-on">{{m.name}}</div>
                                    <div class="status">
                                        <input type="submit" value="Indítás"/>
                                    </div>
                                    <div class="clear"></div>
                                </div>
                                <div class="details">
                                    <h3>
                                        Részletek
                                    </h3>
                                    <ul>
                                        <li class="name">Rendszer: <span class="value">{{m.disk.name}}</span></li>
                                        <li class="type">Instance típus: <span class="value">{{m.instance_type.name}}</span></li>
                                        <li class="memory">Memória: <span class="value">{{m.instance_type.RAM}} MiB</span></li>
                                        <li class="cpu">CPU magok: <span class="value">{{m.instance_type.CPU}}</span></li>
                                    </ul>
                                </div>
                            </form>
                        </li>
                        {% endfor %}
                    </ul>
                </div>
            </li>
        </ul>
    </div>
    <div class="contentblock" id="template">
        <h2>Saját sablonok</h2>
        <ul class="wm-list">
            <li class="wm">
                <div class="summary">
                    <div class="name">Win7 Matlab</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">
                    <h3>Részletek</h3>
                    <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">Aktív példányok: <span class="value">8 db</span></li>
                    </ul>
                </div>
            </li>
            <li class="wm">
                <div class="summary unfinished">
                    <div class="name">Win7 Matlab</div>
                    <div class="status">FÉLKÉSZ</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">
                    <h3>Részletek</h3>
                    <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">Aktív 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>
            <script type="text/html" id="new-template" style="display: none">
                {% include "new-template-flow.html" %}
            </script>
        </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>
<div class="boxes">
    <div class="contentblock">
        <h2>
            Adattár
        </h2>
        <div class="content">
            <ul class="file-list">
                <li class="wm">
                    <div class="summary">
                        <div class="name filetype-c">hello.c</div>
                        <div class="info">1 Kb</div>
                        <div class="actions">
                            <a href="#"><img src="/static/icons/pencil.png" alt="rename" /></a>
                            <a href="#"><img src="/static/icons/minus-circle.png" alt="delete" /></a>
                            <a href="#"><img src="/static/icons/download-cloud.png" alt="download" /></a>
                        </div>
                        <div class="clear"></div>
                    </div>
                    <div class="details">
                        <h3>Részletek</h3>
                        <ul>
                            <li>Létrehozva: <span class="value">2012.12.29. 23:12</span></li>
                            <li>Módosítva: <span class="value">2012.12.29. 23:12</span></li>
                            <li>Hozzáférés: <span class="value">2012.12.29. 23:12</span></li>
                            <li>Típus: <span class="value">text/plain</span></li>
                        </ul>
                    </div>
                </li>
                <li class="wm">
                    <div class="summary">
                        <div class="name filetype-image">suna.jpg</div>
                        <div class="info">1 Kb</div>
                        <div class="actions">
                            <a href="#"><img src="/static/icons/pencil.png" alt="rename" /></a>
                            <a href="#"><img src="/static/icons/minus-circle.png" alt="delete" /></a>
                            <a href="#"><img src="/static/icons/download-cloud.png" alt="download" /></a>
                        </div>
                        <div class="clear"></div>
                    </div>
                    <div class="details">
                        <h3>Részletek</h3>
                        <ul>
                            <li>Létrehozva: <span class="value">2012.12.29. 23:12</span></li>
                            <li>Módosítva: <span class="value">2012.12.29. 23:12</span></li>
                            <li>Hozzáférés: <span class="value">2012.12.29. 23:12</span></li>
                            <li>Típus: <span class="value">image/jpg</span></li>
                        </ul>
                    </div>
                </li>
                <li class="wm">
                    <div class="summary">
                        <div class="name filetype-folder">poresz</div>
                        <div class="info">katalógus</div>
                        <div class="actions">
                            <a href="#"><img src="/static/icons/pencil.png" alt="rename" /></a>
                            <a href="#"><img src="/static/icons/minus-circle.png" alt="delete" /></a>
                        </div>
                        <div class="clear"></div>
                    </div>
                    <div class="details">
                        <h3>Részletek</h3>
                        <ul>
                            <li>Létrehozva: <span class="value">2012.12.29. 23:12</span></li>
                            <li>Módosítva: <span class="value">2012.12.29. 23:12</span></li>
                            <li>Hozzáférés: <span class="value">2012.12.29. 23:12</span></li>
                            <li>Fájlok: <span class="value">666 db</span></li>
                        </ul>
                    </div>
                </li>
                <li class="wm" style="display: none">
                    <div class="summary">
                        <div class="name filetype-text">matlab_serial.txt</div>
                        <div class="info">358 Kb</div>
                        <div class="actions">
                            <a href="#"><img src="/static/icons/pencil.png" alt="rename" /></a>
                            <a href="#"><img src="/static/icons/minus-circle.png" alt="delete" /></a>
                            <a href="#"><img src="/static/icons/download-cloud.png" alt="download" /></a>
                        </div>
                        <div class="clear"></div>
                    </div>
                    <div class="details">
                        <h3>Részletek</h3>
                        <ul>
                            <li>Létrehozva: <span class="value">2012.12.29. 23:12</span></li>
                            <li>Módosítva: <span class="value">2012.12.29. 23:12</span></li>
                            <li>Hozzáférés: <span class="value">2012.12.29. 23:12</span></li>
                            <li>Típus: <span class="value">text/plain</span></li>
                        </ul>
                    </div>
                </li>
                <li class="file-details wm" id="load-more-files">
                    <div class="summary">
                        <div class="name filetype-more">
                            Mutasd a régebbi fájlokat! 
                        </div>
                        <div class="actions" style="text-align: right; display: none">
                            <img src="/static/load-4.gif" alt="loading" />
                        </div>
                        <div class="clear"></div>
                    </div>
                </li>
                <li class="file-upload wm">
                    <div class="summary">
                        <div class="name filetype-up">Fájlfeltöltés</div>
                        <div class="clear"></div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>
{% endblock %}