{% extends "top_level_base.html" %}
{% load version_filters %}

{% block extra_header_content %}
    {% spaceless %}
        {# Top systems capacity #}
        {% if infinibox_systems %}
            <div id="top-capacity" {% if infiniguard_systems %}style="visibility: hidden;"{% endif %}>
                    <div class="header-info-container">
                        <span>Physical</span>
                        <b>{{ total_physical_capacity}}</b>
                        <span>Free</span>
                        <b>{{ free_physical_space }}</b>
                    </div>
                    <div id="capacity-sep"></div>
                    <div class="header-info-container">
                        <span>Virtual</span>
                        <b>{{ total_virtual_capacity}}</b>
                        <span>Free</span>
                        <b>{{ free_virtual_space }}</b>
                    </div>
            </div>
        {% endif %}
        {{ block.super }}
    {% endspaceless %}
{% endblock %}

{% block content %}
    {% include "sidebar_top_level.html" %}
    <div id="top-level-content">
    {# Top bar: Tabs and "Add System" button #}
    {% if systems %}
        <div id="top">
            <div id="top-page-tabs">
                {% if infinibox_systems and infiniguard_systems %}
                    <a class="tab" id="infinibox-tab" href="#">
                        InfiniBox ({{ infinibox_systems|length }})
                    </a>
                    <a class="tab" id="infiniguard-tab" href="#">
                        InfiniGuard ({{ infiniguard_systems|length }})
                    </a>
                {% elif infinibox_systems %}
                    <div class="tab">
                        InfiniBox ({{ infinibox_systems|length }})
                    </div>
                {% elif infiniguard_systems %}
                    <div class="tab">
                        InfiniGuard ({{ infiniguard_systems|length }})
                    </div>
                {% endif %}
            </div>
            <div id="top-buttons">
                <button id="add-system-button" class="button-green" type="button"
                    {% if max_systems_reached %}
                        onclick="show_error('Maximum number of systems was reached, cannot add another.<br>For more information, click <a target=_blank href=https://support.infinidat.com/hc/articles/10106294517021-InfiniMetrics-Sizing-Guide>here<a>.');"
                    {% else %}
                        onclick="add_system();"
                    {% endif %}
                ><i class="icon-plus-squared"></i>  Add System</button>
            </div>
        </div>
    {% endif %}

    {% if infinibox_systems %}
        <div class="systems-scroller" id="infinibox-systems" {% if infiniguard_systems %}style="opacity: 0;"{% endif %}>
            <table class="table systems entities_table sortable">
                <colgroup>
                    <!-- Name -->
                    <col width="15%">
                    <!-- Model -->
                    <col>
                    <!-- Serial -->
                    <col>
                    {% if add_hex_serial_column %}
                        <!-- Serial Hex -->
                        <col>
                    {% endif %}
                    <!-- Version -->
                    <col>
                    <!-- Performance -->
                    <col width="420px">
                    <!-- Physical Capacity -->
                    <col width="10%">
                    <!-- Virtual Capacity -->
                    <col width="10%">
                  </colgroup>
                <thead>
                    <tr>
                        <th><span>Name</span></th>
                        <th><span>Model</span></th>
                        <th><span>Serial</span></th>
                        {% if add_hex_serial_column %}
                            <th><span>Serial Hex</span></th>
                        {% endif %}
                        <th><span>Version</span></th>
                        <th class="sorttable_nosort"><span>Performance</span></th>
                        <th class="sorttable_nosort"><span>Physical Capacity</span></th>
                        <th class="sorttable_nosort"><span>Virtual Capacity</span></th>
                    </tr>
                </thead>
                <tbody>
                	{% for system in infinibox_systems %}
                        <tr class="system checking_status" id="system-{{ system.serial }}" data-url="{% url system.get_main_view_name system.serial %}"
                             data-name="{{ system.name }}" data-serial="{{ system.serial }}" data-type="{{ system.type }}">
                            <td class="system-name">
                                <div><img src="/static/images/icon-error-large.png" height="14"> {{ system.name|upper }}</div>
                                {% if system.enabled %}
                                    <a class="system-gui-link" href="{{ system.api_url }}" target="_blank"><span>System GUI</span></a>
                                {% else %}
                                    <span class="system-gui-link">&nbsp;</span>
                                {% endif %}
                            </td>
                            <td class="system-model">
                                {{ system.model|default:"" }}
                            </td>
                            <td class="system-serial">
                                {{ system.serial }}
                            </td>
                            {% if add_hex_serial_column %}
                                <td class="system-serial-hex">
                                    {{ system.serial|stringformat:"x" }}
                                </td>
                            {% endif %}
                            <td class="system-version" sorttable_customkey="{{ system.get_version_display|version_sort_key }}">
                                {{ system.get_version_display }}
                            </td>
                            <td class="system-status">
                                {% include "system_status.html" %}
                            </td>
                            <td class="system-capacity">
                                <label>Total</label>
                                <span>{{ system.get_total_physical_capacity_display }}</span>
                                <br>
                                <label>Free</label>
                                <span>{{ system.get_free_physical_space_display }}</span>
                            </td>
                            <td class="system-capacity">
                                <label>Total</label>
                                <span>{{ system.get_total_virtual_capacity_display }}</span>
                                <br>
                                <label>Free</label>
                                <span>{{ system.get_free_virtual_space_display }}</span>
                            </td>
                        </tr>
                	{% endfor %}
                </tbody>
            </table>
        </div>
    {% endif %}

    {% if infiniguard_systems %}
        <div class="systems-scroller" id="infiniguard-systems" {% if infinibox_systems %}style="opacity: 0;"{% endif %}>
            <table class="table systems entities_table sortable">
                <colgroup>
                    <!-- Name -->
                    <col width="15%">
                    <!-- Model -->
                    <col>
                    <!-- Serial -->
                    <col>
                    {% if add_hex_serial_column %}
                        <!-- Serial Hex -->
                        <col>
                    {% endif %}
                    <!-- Version -->
                    <col>
                    <!-- Total Throughput -->
                    <col width="20%">
                    <!-- Physical Capacity -->
                    <col width="10%">
                    <!-- Data Reduction -->
                    <col width="15%">
                  </colgroup>
                <thead>
                    <tr>
                        <th><span>Name</span></th>
                        <th><span>Model</span></th>
                        <th><span>Serial</span></th>
                        {% if add_hex_serial_column %}
                            <th><span>Serial Hex</span></th>
                        {% endif %}
                        <th><span>Version</span></th>
                        <th class="sorttable_nosort"><span>Total Throughput</span></th>
                        <th class="sorttable_nosort"><span>Physical Capacity</span></th>
                        <th class="sorttable_nosort"><span>Data Reduction</span></th>
                    </tr>
                </thead>
                <tbody>
                    {% for system in infiniguard_systems %}
                        <tr class="system checking_status" id="system-{{ system.serial }}" data-url="{% url system.get_main_view_name system.serial %}"
                             data-name="{{ system.name }}" data-serial="{{ system.serial }}" data-type="{{ system.type }}">
                            <td class="system-name">
                                <div><img src="/static/images/icon-error-large.png" height="14"> {{ system.name|upper }}</div>
                                {% if system.enabled %}
                                    <a class="system-gui-link" href="{{ system.api_url }}" target="_blank"><span>System GUI</span></a>
                                {% else %}
                                    <span class="system-gui-link">&nbsp;</span>
                                {% endif %}
                            </td>
                            <td class="system-model">
                                {{ system.model|default:"" }}
                            </td>
                            <td class="system-serial">
                                {{ system.serial }}
                            </td>
                            {% if add_hex_serial_column %}
                                <td class="system-serial-hex">
                                    {{ system.serial|stringformat:"x" }}
                                </td>
                            {% endif %}
                            <td class="system-version" sorttable_customkey="{{ system.get_version_display|version_sort_key }}">
                                {{ system.get_version_display }}
                            </td>
                            <td class="system-status">
                                {% include "system_status.html" %}
                            </td>
                            <td class="system-capacity">
                                <label>Total</label>
                                <span>{{ system.get_total_physical_capacity_display }}</span>
                                <br>
                                <label>Free</label>
                                <span>{{ system.get_free_physical_space_display }}</span>
                            </td>
                            <td class="system-capacity">
                                <label class="long-label">Before Reduction</label>
                                <span>{{ system.get_data_size_pre_reduction }}</span>
                                <br>
                                <label class="long-label">After Reduction</label>
                                <span>{{ system.get_data_size_post_reduction }}</span>
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    {% endif %}

    {% if not systems %}
        <div id="no-systems" class="centered-box">
            <p>
                To start using InfiniMetrics, select a system to monitor.
            </p>
            <button id="add-system-button" class="button-green" type="button" onclick="add_system();">
                <i class="icon-plus-squared"></i>  Add System
            </button>
        </div>
    {% endif %}
    </div>
{% endblock %}