{% extends "base.html" %}

{% load static compress %}

{% block page_title %}{{ system|upper }} - InfiniMetrics{% endblock %}

{% block body_class %}system-page{% endblock %}

{% block extra_head %}
    {# This css is also loaded by the add monitor dialog, but it causes problems on first show. Putting it here prevents that. #}
    {% compress css %}
        <link href="/static/css/sidebar.css" type="text/css" rel="stylesheet">
        <link href="/static/css/shuttle_widget.css" type="text/css" rel="stylesheet">
        <link href="/static/css/table_filters.css" type="text/css" rel="stylesheet">
        <link href="/static/css/table_colpicker.css" type="text/css" rel="stylesheet">
    {% endcompress %}
    {% compress js %}
        <script src='{% static "js/table_filters.js" %}'></script>
        <script src='{% static "js/table_colpicker.js" %}'></script>
        <script src='{% static "js/system.js" %}'></script>
        <script src='{% static "js/formatters.js" %}'></script>
    {% endcompress %}
{% endblock %}

{% block header %}
{% endblock %}

{% block content %}

    {% include "sidebar_system.html" %}

    <div class="system" id="system-{{ system.serial }}" data-serial="{{ system.serial }}">

        <div id="systop">
            <div id="systop-name" width="90%">
                <span><a href="{{ system.get_absolute_url }}"><i class="icon-system"></i>{{ system }}</a></span>
                {% block breadcrumbs %}
                    <span>{{ tab }}</span>
                    {{ experimental | experimental_label }}
                {% endblock %}
            </div>
            <div id="systop-status">
                {% include "system_status.html" %}
            </div>
            <div id="top-menu">{% spaceless %}
                <a id="top-menu-toggler" href="#">&bull;<br>&bull;<br>&bull;</a>
                <div id="top-menu">
                    <ul>
                        {% block navbar_contents %}
                        {% if system.enabled %}
                            <li><a class="menu-view" href="{% block system_gui_url %}{{ system.api_url }}{% endblock %}" target="_blank">Open System GUI</a></li>
                        {% endif %}
                        <li><a class="menu-api"  href="{% url "system-detail" system.serial %}" target="_blank">View in API Browser</a></li>
                        {% endblock %}
                    </ul>
                </div>
            {% endspaceless %}</div>
        </div>

        {% block toolbar %}
        {% endblock %}

        {% block main %}
            <div class="entities_cover" data-serial="{{ system.serial }}">
                <table class="table entities_table" width="100%" data-url="{% block entities_table_url %}{% endblock %}">
                    {% block entities_table %}
                    {% endblock %}
                </table>
            </div>
        {% endblock %}

    </div>

{% endblock %}