{% extends "top_level_base.html" %}

{% load static %}
{% load compress %}

{% block extra_head %}
    {{ block.super }}
    {% compress js %}
        <script src='{% static "js/global_search.js" %}'></script>
        <script src='{% static "js/entities_with_averages.js" %}'></script>
        <script src='{% static "js/table_colpicker.js" %}'></script>
    {% endcompress %}
    {% compress css %}
        <link type='text/css' href='{% static "css/table_colpicker.css" %}' rel="stylesheet">
        <link type='text/css' href='{% static "css/system.css" %}' rel="stylesheet">
        <link type='text/css' href='{% static "css/global_search.css" %}' rel="stylesheet">
    {% endcompress %}
{% endblock %}

{% block content %}
    {% include "sidebar_top_level.html" %}
    <div id="top-level-content">
        <div id="top-page-tabs">
            <select id="entity-type" data-initial-value="{{ entity_type|escapejs }}">
                {% if has_ibox %}
                    <optgroup{% if has_ibox and has_iguard %} label="InfiniBox Entities"{% endif %}>
                        <option value="pools">Pools</option>
                        <option value="volumes">Volumes</option>
                        <option value="filesystems">Filesystems</option>
                        {% if show_s3 %}
                            <option value="buckets">Buckets</option>
                        {% endif %}
                        <option value="hosts">Hosts</option>
                        <option value="clusters" {% if not show_nas_clients and has_iguard %} class="with-separator"{% endif %}>Clusters</option>
                        {% if show_nas_clients %}
                            <option value="nas_clients"{% if has_iguard %} class="with-separator"{% endif %}>NAS Clients</option>
                        {% endif %}
                    </optgroup>
                {% endif %}
                {% if has_iguard %}
                    <optgroup{% if has_ibox and has_iguard %} label="InfiniGuard Entities"{% endif %}>
                        <option value="clients">Clients</option>
                        <option value="shares">Shares</option>
                        <option value="partitions">Partitions</option>
                    </optgroup>
                {% endif %}
            </select>
        </div>
        {% block entity_status_filter %}
            {% include "entity_status_filter.html" %}
        {% endblock %}
        {% include "system_search.html" %}
        <div class="entities_cover">
            <table class="table entities_table type_{{entity_type}}" width="100%" data-url='{% url "all_entities_list" entity_type %}'>
                <thead>
                    {% if entity_type == 'pools' %}
                        {% comment %} Pools table is a special case, as it has 2 levels table {% endcomment %}
                        <tr>
                            <th data-field="sys_name" class="bottom-border" width="12%" rowspan="2">System Name <div class="sort"></div></th>
                            <th data-field="sys_serial" class="bottom-border" width="10%" rowspan="2">System Serial <div class="sort"></div></th>
                            <th data-field="name" class="always-visible sorting_asc bottom-border" width="30%" rowspan="2">Name <div class="sort"></div></th>
                            <th colspan="2" class="separator">Physical Capacity</th>
                            <th colspan="2" class="separator">Virtual Capacity</th>
                            <th data-field="type" class="separator bottom-border" rowspan="2">Type <div class="sort"></div></th>
                        </tr>
                        <tr>
                            <th data-field="physical_capacity" class="separator">Total <div class="sort"></div></th>
                            <th data-field="free_physical_space">Free <div class="sort"></div></th>
                            <th data-field="virtual_capacity" class="separator">Total <div class="sort"></div></th>
                            <th data-field="free_virtual_space">Free <div class="sort"></div></th>
                        </tr>
                    {% else %}
                        <tr>
                            <th data-field="sys_name" width="12%">System Name <div class="sort"></div></th>
                            <th data-field="sys_serial" width="10%">System Serial <div class="sort"></div></th>

                            {% for data_field, col_info in model_class.entity_level_cols_for_table.items %}
                                <th data-field="{{ data_field }}"
                                    {% if col_info.width %} width="{{ col_info.width }}"{% endif %}
                                    {% if data_field == 'name' %}
                                        class="always-visible sorting_asc"
                                    {% endif %}>
                                    {{ col_info.text }} <div class="sort"></div>
                                </th>
                                {% if parent_col and data_field == 'name' %}
                                    <!-- always put parent after name -->
                                    <th width="24%" id="th-parent" data-field="parent">{{ parent_col }} <div class="sort"></div></th>
                                {% endif %}
                            {% endfor %}
                        </tr>
                    {% endif %}
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>

    <script type="text/template" id="row-template">
        <tr data-id="<%- entity.sys_serial %>-<%- entity.id %>">
            <td class="wrappable"><%- entity.sys_name %></td>
            <td class="wrappable"><%- entity.sys_serial %></td>
            {% comment %} for nas clients ips we need a special sort key {% endcomment %}
            <td class="wrappable">
                <a href="<%= entity.url %>" onclick="drilldown($(this)); return false;"><%- entity.name %></a>
                <%= entityStatusBadge(entity) %>
            </td>
            {% if entity_type == 'pools' %}
                <td><%- tbfmt(entity.physical_capacity) %> <small>TB</small></td>
                <td><%- tbfmt(entity.free_physical_space) %> <small>TB</small></td>
                <td><%- tbfmt(entity.virtual_capacity) %> <small>TB</small></td>
                <td><%- tbfmt(entity.free_virtual_space) %> <small>TB</small></td>
                <td><%- entity.type %></td>
            {% else %}
            {% if parent_col %}
                <td class="wrappable"><%- entity.parent || '--' %></td>
            {% endif %}
            {% for data_field in model_class.entity_level_cols_for_table %}
                {% if data_field != 'name' %}
                    <td>
                        <div style="display: inline; white-space: normal;">
                            <%- entity.{{ data_field }} %>
                        </div>
                    </td>
                {% endif %}
            {% endfor %}
            {% endif %}
        </tr>
    </script>
{% endblock %}