{% load i18n %}
{% load icons %}
<table class="table table-hover sortable-theme-bootstrap" data-sortable>
    <thead>
        <tr style="border: 2px solid transparent; ">
            <th scope="col" data-sortable="false"><a class="text-secondary" href="#" id="hide_all_instances" onclick="hide_all_host_instances()">#</a></th>
            <th scope="col">{% trans "Name" %}<br>{% trans "Description" %}</th>
            <th scope="col" class="d-none d-sm-table-cell">{% trans "User"%}</th>
            <th scope="col">{% trans "Status" %}</th>
            <th scope="col" class="d-none d-sm-table-cell">{% trans "VCPU" %}</th>
            <th scope="col" class="d-none d-sm-table-cell">{% trans "Memory" %}</th>
            <th scope="col" style="width:200px;" data-sortable="false">{% trans "Actions" %} & {% trans "Mem Usage" %}</th>
        </tr>
    </thead>
    <tbody class="searchable">
        {% for compute in computes %}
            {% if compute.status is True and compute.instance_set.count > 0 %}
                <tr class="font-weight-bold active" style="border-bottom: 2px solid darkgray;border-top: 2px solid darkgray;">
                    <td>
                        <span id="collapse_host_instances_{{ compute.id }}" class="fa fa-chevron-up" onclick="hide_host_instances('{{ compute.id }}');"></span>
                    </td>
                    <td>
                        <a class="text-secondary" href="{% url 'overview' compute.id %}">{{ compute.name }}</a>
                        <span id="inst_count_badge_{{ compute.id }}" class="badge badge-secondary d-none">{{ compute.instance_set.count }}</span>
                    </td>
                    <td class="d-none d-sm-table-cell"></td>
                    <td>
                        <span class="text-success">{% trans "Connected" %}</span>
                    </td>
                    <td class="d-none d-sm-table-cell text-center">{{ compute.cpu_count }}</td>
                    <td class="d-none d-sm-table-cell text-right">{{ compute.ram_size|filesizeformat }}</td>
                    <td>
                        <div class="progress">
                            <div class="progress-bar bg-success" role="progressbar" style="width: {{ compute.ram_usage }}%"
                                aria-valuenow="{{ compute.ram_usage }}" aria-valuemin="0" aria-valuemax="100">{{ compute.ram_usage }}%
                            </div>
                        </div>
                    </td>
                </tr>
                {% for instance in compute.instance_set.all %}
                    <tr host="{{ compute.id }}">
                        <td class="text-right">{{ forloop.counter }} </td>
                        <td>
                            <a class="text-secondary" href="{% url 'instances:instance' instance.id %}">{{ instance.name }}</a><br>
                        </td>
                        <td>
                            <em>
                                {% if instance.userinstance_set.all.count > 0 %}
                                {{ instance.userinstance_set.all.0.user }}
                                {% if instance.userinstance_set.all.count > 1 %}
                                (+{{ instance.userinstance_set.all.count|add:"-1" }})
                                {% endif %}
                                {% endif %}
                            </em>
                        </td>
                        <td>
                            {% if instance.proxy.instance.info.0 == 1 %}<span class="text-success">{% trans "Active" %}</span>{% endif %}
                            {% if instance.proxy.instance.info.0 == 5 %}<span class="text-danger">{% trans "Off" %}</span>{% endif %}
                            {% if instance.proxy.instance.info.0 == 3 %}
                                <span class="text-warning">{% trans "Suspended" %}</span>
                            {% endif %}
                        </td>
                        <td>{{ instance.proxy.instance.info.3 }}</td>
                        <td>{{ instance.cur_memory }} MB</td>
                        <td class="text-nowrap">
                            {% include 'instance_actions.html' %}
                        </td>
                    </tr>
                {% endfor %}
            {% endif %}
        {% 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 %}