{% extends "base.html" %}

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

{% block body_class %}call-home-status-page{% endblock %}

{% block extra_head %}
    {% compress css %}
        <link type='text/css' href='{% static "iconfont/css/animation.css" %}' rel='stylesheet'>
        <link type='text/css' href='{% static "css/switch_widget_large.css" %}' rel='stylesheet'>
    {% endcompress %}
{% endblock %}

{% block content %}

    <div id="top">
        <table>
            <tr>
                <td id="top-buttons" width="50%">
                    <a class="button blue-button" href="/"><i class="icon-left-open"></i>Back</a>
                </td>
                <td id="top-actions" width="50%">
                    <a class="icon-spin3" onclick="refresh()"></a>
                </td>
            </tr>
        </table>
    </div>

    {% if systems %}
        <div id="scroller">
            <table id="entities_table" class="table entities_table">
                <thead>
                    <tr>
                        <th width="30%">Name</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                    {% for system in systems %}
                        <tr class="system">
                            <td class="system-name">
                                {{ system.name|upper }}
                            </td>
                            <td>
                                <span class="status status_{{ system.status}}">
                                    {% if system.status == 'ok' %}OK{% endif %}
                                    {% if system.status == 'disabled' %}Call home is disabled{% endif %}
                                    {% if system.status == 'no_connection' %}Cannot connect to InfiniBox{% endif %}
                                    {% if system.status == 'no_config' %}InfiniBox not configured{% endif %}
                                    {% if system.status == 'delayed' %}Data is not being sent{% endif %}
                                </span>
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    {% endif %}

    <script>

        function refresh(animate) {
            var icon = $('.icon-spin3');
            if (icon.hasClass('animate-spin')) return;
            if (animate) {
                icon.addClass('animate-spin');
            }
            $('#scroller').load('. #entities_table', function() {
                $('.entities_table').floatThead({zIndex: 50});
                icon.removeClass('animate-spin');
            });
        }

        function adjust_layout() {
            $('#scroller').get(0).scrollTop = 0;
            $('#scroller').height($(window).height() - 118);
        }

        $(function() {
            adjust_layout();
            $(window).resize(adjust_layout);
            $('.entities_table').floatThead({zIndex: 50});
        });

    </script>

{% endblock %}