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

{% block js %}
<script type="text/javascript">
    {% if booting or state != 'ACTIVE' %}
    var timer=setInterval(function(){
        $.ajax({
            type: 'GET',
            dataType: 'json',
            url: '/ajax/vm/status/{{ id }}',
            success: function(data){
                if( !data.booting  && data.state == 'ACTIVE'){
                    window.location.reload();
                }
            }
        })
    },2000);
    {% endif %}
</script>
{% endblock %}

{% block content %}
<div class="boxes">
    <div class="contentblock" id="state">
        <h2>{{name}}</h2>
        <div class="content">
        {% if state == "PENDING" or state == "ACTIVE" and booting %}
            <p style="font-size:25px; line-height:2em;text-align:center;">
                <img src="/static/load-2.gif" />
                {% trans "The machine is starting..." %}
            </p>
            <p style="font-size:25px; line-height:2em;text-align:center;">
                <form action="{% url vm_delete id %}" method="post" onsubmit="return confirm('Biztosan törli a gépet?')">
                    {% csrf_token %}
                    <input type="submit" class="icon-delete" value="Törlés" />
                </form>
                <a href="/">
                    <img src="/static/icons/Go-home.png" alt="&lt;-" />
                </a>
            </p>

        {% elif state == "ACTIVE" and not booting %}
            <p id="connect" style="display:block; font-size:25px; line-height:2em;text-align:center;">
                <a href="{{uri}}" class="button" onclick="return connectbutton();">
                    <img src="/static/load-1.gif" id="connecting" style="display:none;" />
                    {% trans "Connect" %}
                </a>
            </p>
            <p style="font-size:25px; line-height:2em;text-align:center;">
                <form action="{% url vm_delete id %}" method="post" onsubmit="return confirm('Biztosan törli a gépet?')">
                    {% csrf_token %}
                    <input type="submit" class="icon-delete" value="Törlés" />
                </form>
                <a href="/">
                    <img src="/static/icons/Go-home.png" alt="&lt;-" />
                </a>
            </p>
        {% elif state == "STOPPED" %}
            <p style="font-size:25px; line-height:2em;text-align:center;">
            {% trans "The machine is stopped" %}
            </p>
            <p style="font-size:25px; line-height:2em;text-align:center;">
                <form action="{% url vm_delete id %}" method="post" onsubmit="return confirm('Biztosan törli a gépet?')">
                    {% csrf_token %}
                    <input type="submit" class="icon-delete" value="Törlés" />
                </form>
                <a href="/">
                    <img src="/static/icons/Go-home.png" alt="&lt;-" />
                </a>
            </p>
        {% endif %}
        {% if state == "DONE" %}
            <p style="font-size:25px; line-height:2em;text-align:center;">
            {% trans "The machine deleted" %}
            </p>
            <p style="font-size:25px; line-height:2em;text-align:center;">
                <a href="/">
                    <img src="/static/icons/Go-home.png" alt="⌫" />
                </a>
            </p>
        {% endif %}
        {% if state == "FAILED" %}
            <p style="font-size:25px; line-height:2em;text-align:center;">
                {% trans "Unexpected error occured" %}
            </p>
            <p style="font-size:25px; line-height:2em;text-align:center;">
                <form action="{% url vm_delete id %}" method="post" onsubmit="return confirm('Biztosan törli a gépet?')">
                    {% csrf_token %}
                    <input type="submit" class="icon-delete" value="Törlés" />
                </form>
                <a href="/">
                    <img src="/static/icons/Go-home.png" alt="⌫" />
                </a>
            </p>
            {% endif %}
        {% if state == "STOPPPED" %}
            <p style="font-size:25px; line-height:2em;text-align:center;">
                <a href="/vm/suspend/{{i.id}}/">
                    <img src="/static/icons/Media-playback-start.png" alt="&gt;" />
                </a>
                <a href="/">
                    <img src="/static/icons/Go-home.png" alt="⌫" />
                </a>
            </p>
            {% endif %}
        </div>
    </div>
    <div class="contentblock" id="vm-credentials">
        <h2>{% trans "Login credentials" %}</h2>
        <div class="content">
            <table>
                <tr>
                    <th>{% trans "Protocol" %}:</th>
                    <td>{{i.template.access_type|upper}}</td>
                </tr>
                <tr>
                    <th>{% trans "IP" %}:</th>
                    <td>{{ i.firewall_host.pub_ipv4}}</td>
                </tr>
                <tr>
                    <th>{% trans "Port" %}:</th>
                    <td>{{ i.get_port}}</td>
                </tr>
                <tr>
                    <th>{% trans "Username" %}:</th>
                    <td>cloud</td>
                </tr>
                <tr>
                    <th>{% trans "Password" %}:</th>
                    <td>{{ i.pw }}</td>
                </tr>
            </table>
        </div>
    </div>
    <div class="contentblock" id="ports">
        <h2>Portok kezelése</h2>
        <div class="content">
            <form action="{% url vm_port_add i.id %}" method="post">
                {% csrf_token %}
                <table>
                    <tr>
                        <th>{% trans "Protocol" %}</th>
                        <th>{% trans "Public port" %}</th>
                        <th colspan="2">{% trans "Private port" %}</th>
                    </tr>
                    {% for port in ports %}
                    <tr>
                        <td>{{port.proto}}</td>
                        <td>{{port.public}}</td>
                        <td>{{port.private}}</td>
                        <td>
                            <a href="/vm/port_del/{{i.id}}/{{port.proto}}/{{port.public}}/">{% trans "Delete" %}</a>
                        </td>
                    </tr>
                    {% endfor %}
                    <tr>
                        <td>
                            <select style="min-width:50px;" name=proto>
                                <option value="tcp">tcp</option>
                                <option value="udp">udp</option>
                            </select>
                        </td>
                        <td>
                            <input style="min-width:70px;width:70px;" type="text" name="public"/>
                        </td>
                        <td>
                            <input style="min-width:70px;width:70px;" type="text" name="private"/>
                        </td>
                        <td>
                            <input type="submit" style="min-width:3em" value="{% trans "Add" %}" />
                        </td>
                    </tr>
                </table>
            </form>
        </div>
    </div>
</div>
<div class="boxes">
    <div class="contentblock" id="vm-list">
        <h2>Virtuális gépek</h2>
        <ul class="wm-list">{% include "box-vmlist.html" %}</ul>
    </div>
</div>
{% endblock %}
