{% load i18n %}
<table class="table table-hover sortable-theme-bootstrap" data-sortable>
    <thead>
    <tr style="border: 2px solid transparent; ">
        <th data-sortable="false"><a class="text-secondary" href="#" id="hide_all_instances" onclick="hide_all_host_instances()">#</a></th>
        <th>{% trans "Name" %}<br>{% trans "Description" %}</th>
        <th class="d-none d-sm-table-cell">{% trans "User"%}</th>
        <th>{% trans "Status" %}</th>
        <th class="d-none d-sm-table-cell">{% trans "VCPU" %}</th>
        <th class="d-none d-sm-table-cell">{% trans "Memory" %}</th>
        <th style="width:200px;" data-sortable="false">{% trans "Actions" %} & {% trans "Mem Usage" %}</th>
    </tr>
    </thead>
    <tbody class="searchable">
    {% for host, insts  in all_host_vms.items %}
        <tr class="font-weight-bold active" style="border-bottom: 2px solid darkgray;border-top: 2px solid darkgray;">
            <td>
                <span id="collapse_host_instances_{{ host.1 }}" class="fa fa-chevron-up" onclick="hide_host_instances('{{ host.1 }}');"></span>
            </td>
            <td>
                <a class="text-secondary" href="{% url 'overview' host.0 %}">{{ host.1 }}</a>
                <span id="inst_count_badge_{{ host.1 }}" class="badge badge-secondary d-none">{{ insts.items|length }}</span>
            </td>
            <td class="d-none d-sm-table-cell"></td>
            <td>
                {% ifequal host.2 1 %}<span class="text-success">{% trans "Active" %}</span>{% endifequal %}
                {% ifequal host.2 2 %}<span class="text-warning">{% trans "Not Active" %}</span>{% endifequal %}
                {% ifequal host.2 3 %}<span class="text-danger">{% trans "Connection Failed" %}</span>{% endifequal %}
            </td>
            <td class="d-none d-sm-table-cell text-center">{{ host.3 }}</td>
            <td class="d-none d-sm-table-cell text-right">{{ host.4|filesizeformat }}</td>
            <td>
                <div class="progress">
                    <div class="progress-bar bg-success" role="progressbar" style="width: {{ host.5 }}%"
                        aria-valuenow="{{ host.5 }}" aria-valuemin="0" aria-valuemax="100">{{ host.5 }}%
                    </div>
                </div>
            </td>
        </tr>

        {% for inst, vm in insts.items %}
            <tr host="{{ host.1 }}">
                <td class="text-right">{{ forloop.counter }} </td>
                <td>&emsp; 
                    <a class="text-secondary" href="{% url 'instance' host.0 inst %}">{{ inst }}</a><br>
                    <small><em>{{ vm.title }}</em></small>
                </td>
                 <td class="d-none d-sm-table-cell">
                    <span class="font-small font-italic">
                        {% if vm.userinstances.count > 0 %} {{ vm.userinstances.first_user.user.username }}
                            {% if vm.userinstances.count > 1 %} (+{{ vm.userinstances.count|add:"-1" }}){% endif %}
                        {% endif %}
                    </span>
                </td>
                <td>
                    {% ifequal vm.status 1 %}<span class="text-success">{% trans "Active" %}</span>{% endifequal %}
                    {% ifequal vm.status 5 %}<span class="text-danger">{% trans "Off" %}</span>{% endifequal %}
                    {% ifequal vm.status 3 %}<span class="text-warning">{% trans "Suspend" %}</span>{% endifequal %}
                </td>
                <td class="d-none d-sm-table-cell text-center">{{ vm.vcpu }}</td>
                <td class="d-none d-sm-table-cell text-right">{{ vm.memory |filesizeformat }}</td>
                <td  class="text-nowrap">
                    {% include 'instance_actions.html' %}
                </td>
            </tr>
        {% endfor %}
    {% endfor %}
    </tbody>
</table>
{% block script %}
<script>
function hide_all_host_instances() {
    var rows = $('table tr');
    all_host_rows = rows.filter('[host]');
    all_host_rows.toggle();
    $('span[id^=collapse_host_instances_]').toggleClass("fa-chevron-down").toggleClass("fa-chevron-up");
    $('span[id^=inst_count_badge_]').toggleClass("d-none");
}
function hide_host_instances(host) {
    var rows = $('table tr');
    host_rows = rows.filter("[host='"+host+"']");
    host_rows.toggle();
    $("span[id='collapse_host_instances_"+host+"']").toggleClass("fa-chevron-down").toggleClass("fa-chevron-up");
    $("span[id='inst_count_badge_"+host+"']").toggleClass("d-none");
}
</script>
{% endblock %}