{% extends "base.html" %}
{% load i18n %}
{% load staticfiles %}
{% block title %}{% trans "Instances" %}{% endblock %}
{% block style %}
    <link href="{% static "css/table-sort.css" %}" rel="stylesheet">
{% endblock %}
{% block content %}
    {% include 'sidebar.html' %}
    <div class="main col-xs-12 col-sm-9" role="main">
        {% if errors %}
            {% for error in errors %}
                <div class="alert alert-danger">
                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                    {{ error }}
                </div>
            {% endfor %}
        {% endif %}
        {% if instances %}
            <div class="table-responsive">
                <table class="table" id="sortTable">
                    <thead>
                    <tr class="active">
                        <th>{% trans "Name" %}</th>
                        <th>{% trans "Status" %}</th>
                        <th>{% trans "VCPUs" %}</th>
                        <th>{% trans "Memory" %}</th>
                        <th style="width:252px;">{% trans "Action" %}</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for inst in instances|dictsort:"name.lower"|dictsort:"status" %}
                        <tr id="{{ inst.name }}">
                            <td><a href="{% url 'instance' host_id inst.name %}"><i
                                    class="icon-th-large"></i> {{ inst.name }}</a></td>
                            <td>{% ifequal inst.status 1 %}
                                <span class="label label-success">{% trans "Running" %}</span>
                            {% endifequal %}
                                {% ifequal inst.status 5 %}
                                    {% ifequal inst.has_managed_save_image 1 %}
                                        <span class="label label-warning">{% trans "Saved" %}</span>
                                    {% else %}
                                        <span class="label label-danger">{% trans "Shutoff" %}</span>
                                    {% endifequal %}
                                {% endifequal %}
                                {% ifequal inst.status 3 %}
                                    <span class="label label-warning">{% trans "Suspend" %}</span>
                                {% endifequal %}
                            </td>
                            <td>{{ inst.vcpu }}</td>
                            <td>{{ inst.memory }}{% trans "MB" %}</td>
                            <td>
                                <form action="" method="post" role="form">{% csrf_token %}
                                    <input type="hidden" name="name" value="{{ inst.name }}"/>
                                    {% ifequal inst.status 5 %}
                                        <button class="btn btn-sm btn-default" type="submit" name="start" title="Start">
                                            <span class="glyphicon glyphicon-play"></span>
                                        </button>
                                        <button class="btn btn-sm btn-default disabled" title="{% trans "Suspend" %}">
                                            <span class="glyphicon glyphicon-pause"></span>
                                        </button>
                                        <button class="btn btn-sm btn-default disabled" title="{% trans "Save" %}">
                                            <span class="glyphicon glyphicon-download-alt"></span>
                                        </button>
                                        {% ifequal inst.has_managed_save_image 1 %}
                                            <button class="btn btn-sm btn-default" type="submit" name="deletesaveimage"
                                                    title="{% trans "Delete Save Image" %}">
                                                <span class="glyphicon glyphicon-remove"></span>
                                            </button>
                                        {% else %}
                                            <button class="btn btn-sm btn-default disabled" title="{% trans "Shutdown" %}">
                                                <span class="glyphicon glyphicon-off"></span>
                                            </button>
                                        {% endifequal %}
                                        <button class="btn btn-sm btn-default disabled"
                                                title="{% trans "Force Shutdown" %}">
                                            <span class="glyphicon glyphicon-stop"></span>
                                        </button>
                                        <button class="btn btn-sm btn-default disabled" title="{% trans "Console" %}">
                                            <span class="glyphicon glyphicon-align-justify"></span>
                                        </button>
                                    {% endifequal %}
                                    {% ifequal inst.status 3 %}
                                        <button class="btn btn-sm btn-default" type="submit" name="resume"
                                                title="{% trans "Resume" %}">
                                            <span class="glyphicon glyphicon-play"></span>
                                        </button>
                                        <button class="btn btn-sm btn-default disabled" title="{% trans "Suspend" %}">
                                            <span class="glyphicon glyphicon-pause"></span>
                                        </button>
                                        <button class="btn btn-sm btn-default" type="submit" name="managedsave"
                                                title="{% trans "Save" %}">
                                            <span class="glyphicon glyphicon-download-alt"></span>
                                        </button>
                                        <button class="btn btn-sm btn-default disabled" title="{% trans "Shutdown" %}">
                                            <span class="glyphicon glyphicon-off"></span>
                                        </button>
                                        <button class="btn btn-sm btn-default disabled"
                                                title="{% trans "Force Shutdown" %}">
                                            <span class="glyphicon glyphicon-stop"></span>
                                        </button>
                                        <button class="btn btn-sm btn-default disabled" title="{% trans "Console" %}">
                                            <span class="glyphicon glyphicon-align-justify"></span>
                                        </button>
                                    {% endifequal %}
                                    {% ifequal inst.status 1 %}
                                        <button class="btn btn-sm btn-default disabled" title="{% trans "Start" %}">
                                            <span class="glyphicon glyphicon-play"></span>
                                        </button>
                                        <button class="btn btn-sm btn-default" type="submit" name="suspend"
                                                title="{% trans "Suspend" %}">
                                            <span class="glyphicon glyphicon-pause"></span>
                                        </button>
                                        <button class="btn btn-sm btn-default" type="submit" name="managedsave"
                                                title="{% trans "Save" %}">
                                            <span class="glyphicon glyphicon-download-alt"></span>
                                        </button>
                                        <button class="btn btn-sm btn-default" type="submit" name="shutdown"
                                                title="{% trans "Shutdown" %}">
                                            <span class="glyphicon glyphicon-off"></span>
                                        </button>
                                        <button class="btn btn-sm btn-default" type="submit" name="destroy"
                                                title="{% trans "Force Shutdown" %}"
                                                onclick="return confirm('Are you sure?')">
                                            <span class="glyphicon glyphicon-stop"></span>
                                        </button>
                                        <a href="#" class="btn btn-sm btn-default"
                                           onclick='open_console("{{ host_id }}-{{ inst.uuid }}")' title="{% trans "Console" %}">
                                            <span class="glyphicon glyphicon-align-justify"></span>
                                        </a>
                                    {% endifequal %}
                                </form>
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        {% else %}
            <div class="well">
                <h4>{% trans "You do not have any Virtual Machines" %}</h4>
            </div>
        {% endif %}
    </div>
    {% include 'sidebar_close.html' %}
{% endblock %}
{% block script %}
    <script>
        function status() {
            $.getJSON('{% url 'insts_status' host_id %}', function (data) {
                for (var i = 0; i < data.length; i++) {
                    var elem = '#' + data[i]['name']
                    if (data[i]['status'] === 1) {
                        if (data[i]['dump'] === 1) {
                            var btn = "<button class='btn btn-sm btn-default' type='submit' name='deletesaveimage' title='{% trans "Delete Save Image" %}'>"
                                    + "<span class='glyphicon glyphicon-remove'></span>"
                                    + "</button> ";
                        } else {
                            var btn = "<button class='btn btn-sm btn-default' type='submit' name='shutdown' title='{% trans "Shutdown" %}'>"
                                    + "<span class='glyphicon glyphicon-off'></span>"
                                    + "</button> ";
                        }
                        $(elem).html("<td><a href='/instance/{{ host_id }}/" + data[i]['name'] + "'><i class='icon-th-large'></i> " + data[i]['name'] + "</a></td>"
                                + "<td><span class='label label-success'>{% trans "Running" %}</span></td>"
                                + "<td>" + data[i]['vcpu'] + "</td>"
                                + "<td>" + data[i]['memory'] + "{% trans "MB" %}</td>"
                                + "<td>"
                                + "<form action='' method='post'>{% csrf_token %}"
                                + "<input type='hidden' name='name' value='" + data[i]['name'] + "' />"
                                + "<button class='btn btn-sm btn-default disabled' title='{% trans "Start" %}'>"
                                + "<span class='glyphicon glyphicon-play'></span>"
                                + "</button> "
                                + "<button class='btn btn-sm btn-default' type='submit' name='suspend' title='{% trans "Suspend" %}'>"
                                + "<span class='glyphicon glyphicon-pause'></span>"
                                + "</button> "
                                + "<button class='btn btn-sm btn-default' type='submit' name='managedsave' title='{% trans "Save" %}'>"
                                + "<span class='glyphicon glyphicon-download-alt'></span>"
                                + "</button> "
                                + btn
                                + "<button class='btn btn-sm btn-default' type='submit' name='destroy' title='{% trans "Force Shutdown" %}' onclick='return confirm('Are you sure?')'>"
                                + "<span class='glyphicon glyphicon-stop'></span>"
                                + "</button> "
                                + "<a href='#' class='btn btn-sm btn-default' onclick='open_console(\"" + data[i]['host'] + "-" + data[i]['uuid'] + "\")' title='{% trans "Console" %}'>"
                                + "<span class='glyphicon glyphicon-align-justify'></span>"
                                + "</a> "
                                + "</form>"
                                + "</td>");
                    }
                    if (data[i]['status'] === 3) {
                        $(elem).html("<td><a href='/instance/{{ host_id }}/" + data[i]['name'] + "'><i class='icon-th-large'></i> " + data[i]['name'] + "</a></td>"
                                + "<td><span class='label label-warning'>{% trans "Suspend" %}</span></td>"
                                + "<td>" + data[i]['vcpu'] + "</td>"
                                + "<td>" + data[i]['memory'] + "{% trans "MB" %}</td>"
                                + "<td>"
                                + "<form action='' method='post'>{% csrf_token %}"
                                + "<input type='hidden' name='name' value='" + data[i]['name'] + "' />"
                                + "<button class='btn btn-sm btn-default' type='submit' name='resume' title='{% trans "Resume" %}'>"
                                + "<span class='glyphicon glyphicon-play'></span>"
                                + "</button> "
                                + "<button class='btn btn-sm btn-default disabled' title='{% trans "Suspend" %}'>"
                                + "<span class='glyphicon glyphicon-pause'></span>"
                                + "</button> "
                                + "<button class='btn btn-sm btn-default' type='submit' name='managedsave' title='{% trans "Save" %}'>"
                                + "<span class='glyphicon glyphicon-download-alt'></span>"
                                + "</button> "
                                + "<button class='btn btn-sm btn-default disabled' title='{% trans "Shutdown" %}'>"
                                + "<span class='glyphicon glyphicon-off''></span>"
                                + "</button> "
                                + "<button class='btn btn-sm btn-default disabled' title='{% trans "Force Shutdown" %}'>"
                                + "<span class='glyphicon glyphicon-stop'></span>"
                                + "</button> "
                                + "<button class='btn btn-sm btn-default disabled' title='{% trans "Console" %}'>"
                                + "<span class='glyphicon glyphicon-align-justify'></span>"
                                + "</button> "
                                + "</form>"
                                + "</td>");
                    }
                    if (data[i]['status'] == 5) {
                        $(elem).html("<td><a href='/instance/{{ host_id }}/" + data[i]['name'] + "'><i class='icon-th-large'></i> " + data[i]['name'] + "</a></td>"
                                + "<td><span class='label label-danger'>{% trans "Shutoff" %}</span></td>"
                                + "<td>" + data[i]['vcpu'] + "</td>"
                                + "<td>" + data[i]['memory'] + "{% trans "MB" %}</td>"
                                + "<td>"
                                + "<form action='' method='post'>{% csrf_token %}"
                                + "<input type='hidden' name='name' value='" + data[i]['name'] + "' />"
                                + "<button class='btn btn-sm btn-default' type='submit' name='start' title='{% trans "Start" %}'>"
                                + "<span class='glyphicon glyphicon-play'></span>"
                                + "</button> "
                                + "<button class='btn btn-sm btn-default disabled' title='{% trans "Suspend" %}'>"
                                + "<span class='glyphicon glyphicon-pause'></span>"
                                + "</button> "
                                + "<button class='btn btn-sm btn-default disabled' title='{% trans "Save" %}'>"
                                + "<span class='glyphicon glyphicon-download-alt'></span>"
                                + "</button> "
                                + "<button class='btn btn-sm btn-default disabled' title='{% trans "Shutdown" %}'>"
                                + "<span class='glyphicon glyphicon-off'></span>"
                                + "</button> "
                                + "<button class='btn btn-sm btn-default disabled' title='{% trans "Force Shutdown" %}'>"
                                + "<span class='glyphicon glyphicon-stop'></span>"
                                + "</button> "
                                + "<button class='btn btn-sm btn-default disabled' title='{% trans "Console" %}'>"
                                + "<span class='glyphicon glyphicon-align-justify'></span>"
                                + "</button> "
                                + "</form>"
                                + "</td>");
                    }
                }
            });
        }
        $(function () {
            window.setInterval('status()', {{ time_refresh }});
        });
        function open_console(uuid) {
            window.open("/console/?token=" + uuid, "", "width=850,height=485");
        }
    </script>
    <script src="{% static "js/jquery.tablesorter.js" %}"></script>
    <script>
        $(function() {
            $("#sortTable").tablesorter({
                ignoreCase: true,
                sortList: [[1,0], [0,0]],
                headers: {4: {sorter: false}},
                textSorter: {0: $.tablesorter.sortText}
            });
        });
    </script>
{% endblock %}