{% 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>
<p>
Mese, hogy mit is lehet csinálni.
</p>
<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">
3/10
</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>
<li> <span class="value"><input type="submit" value="Indítás"/></span></li>
</ul>
</div>
</form>
</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: 0%"></div>
</div>
<div class="name">Saját Kvóta: 0/10</div>
<div class="clear"></div>
</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="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="Á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">1 db</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">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">
<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">Elosztható Kvóta: 19/100</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>
<div class="boxes">
<div class="contentblock">
<h2>
Adattár
</h2>
<div class="content">
<ul class="file-list">
<li class="wm small">
<div class="summary">
<div class="name">Jelenlegi hely: <span data-bind="text: currentPath"></span></div>
<div class="clear"></div>
</div>
</li>
<li class="wm real" data-bind="visible: notInRoot, click: jumpUp">
<div class="summary">
<div class="name filetype-jump-out">
..
</div>
<div class="clear"></div>
</div>
</li>
<li class="wm small real" data-bind="visible: files().length == 0">
<div class="summary">
<div class="name">Nincs megjeleníthető fájl.</div>
<div class="clear"></div>
</div>
</li>
<!-- ko foreach: {data:files,afterAdd:fadeIn} -->
<li class="wm real">
<div class="summary" data-bind="click: clickHandler">
<div class="name" data-bind="text: name, attr: {class: getTypeClass}"></div>
<div class="info" data-bind="text: size"></div>
<div class="actions">
<a href="#">
<img src="/static/icons/pencil.png" alt="rename" />
</a>
<a href="#" data-bind="click: $parent.delete, clickBubble: false">
<img src="/static/icons/minus-circle.png" alt="delete" />
</a>
<a href="#" data-bind="click: $parent.download, clickBubble: false">
<img src="/static/icons/download-cloud.png" alt="download" />
</a>
</div>
<div class="clear"></div>
</div>
<div class="details">
<div class="details-container">
<ul>
<li>Módosítva: <span class="value" data-bind="text: mTime"></span></li>
<li>Típus: <span class="value" data-bind="text: type"></span></li>
</ul>
</div>
</div>
</li>
<!-- /ko -->
<li class="file-details wm" id="load-more-files" data-bind="visible: (files().length>0 && files().length != allFiles.length)">
<div class="summary" data-bind="click: showMore">
<div class="name filetype-more">
Mutass több fájlt!
</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 %}