{% extends "base.html" %}

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

{% block extra_head %}
    {% compress css %}
        <link type="text/css" href='{% static "css/charts.css" %}' rel="stylesheet">
        <link type="text/css" href='{% static "css/sidebar.css" %}' rel="stylesheet">
        <link type="text/css" href='{% static "css/context_menu.css" %}' rel="stylesheet">
        <link type="text/css" href='{% static "css/switch_widget.css" %}' rel="stylesheet">
        <link type="text/css" href='{% static "jquery-ui-timepicker-addon/dist/jquery-ui-timepicker-addon.css" %}' rel="stylesheet">
        <link type="text/css" href='{% static "css/datepicker.css" %}' rel="stylesheet">
        <link type="text/css" href='{% static "css/lib/jquery.multiselect.css" %}' rel="stylesheet">
        <link type="text/css" href='{% static "css/lib/dygraph.css" %}' rel="stylesheet">
    {% endcompress %}
    <script>
        iu = {{ system.is_internal_user|lower }};
        var serial = '{{ serial }}';  // Used also by state_controller.js
        var monitored_entity_id = '{{ monitored_entity_id }}';
        var chart_start = parseInt("{{ request.GET.from|default:"null"|escapejs }}");
        var chart_end = parseInt("{{ request.GET.to|default:"null"|escapejs }}");
        var back = '{{ request.GET.back|escapejs }}';

        {% if monitored_entity and not monitored_entity.enabled and not monitored_entity.should_display_disabled %}
            {# Show deleted entity notification #}
            $(document).ready(function () {
                show_deleted_warning('{{ monitored_entity.modified|date:"r" }}');
            });
        {% endif %}
    </script>
    {% compress js %}
        <script src='{% static "js/lib/dygraph.js" %}'></script>
        <script src='{% static "jquery-ui-timepicker-addon.js" %}'></script>
        <script src='{% static "js/lib/jquery.plugin.js" %}'></script>
        <script src='{% static "js/lib/jquery.timeentry.js" %}'></script>
        <script src='{% static "jquery-contextmenu/dist/jquery.contextMenu.js" %}'></script>
        <script src='{% static "moment.js" %}'></script>
        <script src='{% static "tinycolor.js" %}'></script>
        <script src='{% static "js/lib/jquery.multiselect.js" %}'></script>
        <script src='{% static "js/formatters.js" %}'></script>
        <script src='{% static "js/models.js" %}'></script>
        <script src='{% static "js/views.js" %}'></script>
        <script src='{% static "js/main.js" %}'></script>
        <script src='{% static "js/base_charts.js" %}'></script>
        <script src='{% static "js/state_controller.js" %}'></script>
        <script src='{% static "js/chart_switcher.js" %}'></script>
    {% endcompress %}
{% endblock %}

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

{% block body_class %}charts-page {% if request.GET.embed == "1" %}embedded{% endif %}{% 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">
                <span><a href="{{ system.get_absolute_url }}"><i class="icon-system"></i>{{ system }}</a></span>
                {% block breadcrumbs %}
                    {% if monitored_entity.dde %}
                        {# For entities with dde, add dde to breadcrumbs #}
                        <span><a href="{{ monitored_entity.dde.get_absolute_url}}">{{ monitored_entity.dde }}</a></span>
                    {% endif %}
                    {% if monitored_entity.get_group_name != 'System' %}
                        <span><a href="{% block group_url %}{{ system.get_absolute_url}} {% endblock %}">{{ monitored_entity.get_group_name }}</a></span>
                    {% endif %}
                    <span>
                        {{ monitored_entity }}
                        {% if monitored_entity.get_additional_info %}
                            <span id="entity-additional-info">{{ monitored_entity.get_additional_info }}</span>
                        {% endif %}
                    </span>
                {% 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 top_menu_items %}
                            {% if monitored_entity.get_gui_url and monitored_entity.enabled %}
                                <li><a href="{{ monitored_entity.get_gui_url }}" target="_blank">Open in System GUI</a></li>
                            {% endif %}
                            {% if monitored_entity %}
                                {% if monitored_entity.enabled %}
                                    <li><a href="{% url "monitored-entity-detail" system.serial monitored_entity.id %}" target="_blank">View in API Browser</a></li>
                                {% endif %}
                                <li><a href="#" onclick="export_data({{ monitored_entity.id }}); return false;">Export Data</a></li>
                                {% block extra_menu_items %}
                                {% endblock %}
                            {% endif %}
                        {% endblock %}
                        <li><a href="#" onclick="show_chart_controls(); return false;">Help</a></li>
                    </ul>
                </div>
            {% endspaceless %}
            </div>
        </div>

        <div id="toolbar">
            <form id="toolbar-left" autocomplete="off">
                {% block nav_dropdown %}
                    {% if all_entities and all_entities.count > 1 %}
                        <select id="chart-type">
                            {% for entity in all_entities %}
                                {% with entity.get_absolute_url as entity_url %}
                                    {% if entity_url %}
                                        <option value="{{ entity_url }}"
                                                {% if entity_url == request.path %}selected="selected"{% endif %}>
                                            {{ entity }}
                                        </option>
                                    {% endif %}
                                {% endwith %}
                            {% endfor %}
                        </select>
                    {% endif %}
                {% endblock %}
            </form>
            <div id="toolbar-right">
                <select id="chart-range">
                    {% block chart_ranges %}
                        <option value="1">Last hour</option>
                        <option value="3">Last 3 hours</option>
                        <option value="8">Last 8 hours</option>
                        <option value="24">Last day</option>
                        <option value="72">3 days</option>
                        <option value="168">7 days</option>
                        <option value="720">1 month</option>
                        <option value="2184">3 months</option>
                        <option value="4368">6 months</option>
                        <option value="8760">1 year</option>
                        <option value="custom">Custom</option>
                    {% endblock %}
                </select>
                {% block resampling_mode %}
                    <select id="resampling-mode">
                        <option value="avg">Average</option>
                        <option value="p95">95th percentile</option>
                        <option value="p99">99th percentile</option>
                        <option value="max">Maximum</option>
                    </select>
                {% endblock %}
                <div class="form-field" style="display: inline-block;">
                    <input id="start" type="text" autocomplete="off" class="datepicker" readonly>&mdash;
                    <input id="end" type="text" autocomplete="off" class="datepicker" readonly>
                </div>
            </div>
        </div>
        <div id="del-time-container" class="alert alert-warning hidden">
            This entity was deleted on
            <span id="del-time">
            </span>
        </div>
        <div id="charts-cover" oncontextmenu="return false;">
            <div id="annotation-search-active" class="off">
                <div>
                    <img src="{% static "images/annotation-yellow.svg" %}">
                    Annotation search is in effect.
                    <button onclick="clear_highlighted_annotation();">Reset</button>
                </div>
            </div>
            <div id="charts"></div>
        </div>

    </div>

    <div id="chart_controls" class="hidden">
        <h2>Basic Controls</h2>
        <ul>
            <li>Hover over the chart to see its legend and the data values under the cursor.</li>
            <li>Shift-drag to pan the chart left or right.</li>
        </ul>
        <h2>Zooming</h2>
        <ul>
            <li>Drag horizontally to select a region and zoom into it.</li>
            <li>Double-click to zoom back out.</li>
        </ul>
        <h2>Annotations</h2>
        <ul>
            <li>Click the chart while holding the CTRL or CMD key to add an annotation.</li>
            <li>Hover over an annotation marker to view its details.</li>
            <li>Click an annotation marker to edit or delete it.</li>
        </ul>
    </div>

    <script type="text/template" id="dual-col-charts" class="show-both">
        <div class="left"></div>
        <div class="right"></div>
    </script>

    <script type="text/template" id="chart-template">
        <div class="chart"></div>
    </script>

    <script type="text/template" id="legend-template">
        <div class="legend-timestamp">
            <span></span><span></span>
        </div>
        <div class="legend-toggle-all"></div>
        <div class="legend-toggle-groups"></div>
        <div class="legend-items"></div>
    </script>

    <script type="text/template" id="legend-item-template">
        <div class="legend-item <%- className %>">
            <span class="legend-name">
                <input id="<%- id %>" data-index="<%- index %>" class="switch" type="checkbox" <% if (visible) { %>checked<% } %>>
                <label for="<%- id %>" style="background: <%- color %>;"><%= label %></label>
            </span>
            <span class="legend-value"></span>
        </div>
    </script>

    <script type="text/template" id="toggle-all-template">
        <div class="legend-item toggleall">
            <span class="legend-name">
                <input id="<%- id %>" data-index="<%- index %>" class="switch" type="checkbox" checked>
                <label for="<%- id %>" style="background: <%- color %>; font-Weight:bold;">Hide/Show All</label>
            </span>
            <span class="legend-value"></span>
        </div>
    </script>

    <script type="text/template" id="toggle-groups-template">
        <div class="legend-item toggle-group" data-tooltip="<%- tooltip %>">
            <span class="legend-name">
                <input id="<%- id %>" data-index="<%- index %>" class="switch" data-group-name="<%- group_name %>" type="checkbox" checked>
                <label for="<%- id %>" style="background: <%- color %>; font-Weight:bold;"><%- short_group_name %></label>
            </span>
            <span class="legend-value"></span>
        </div>
    </script>

    <script type="text/template" id="legend-total-template">
        <div class='legend-item'>
            <span class='legend-name legend-total-name'>
                <label>Total</label>
            </span>
            <span class='legend-value legend-total-value'>
            </span>
        </div>
    </script>

    <script type="text/template" id="annotation-template">
        <div class="tooltip-timestamp"><span><%= local_str.substr(0, 10) %></span>&nbsp;<span><%= local_str.substr(11, 8) %></span></div><%- description %>
    </script>

    <script type="text/template" id="annotation-search-template">
        <div class="form-field" style="margin-bottom: 20px;">
            <input id="annotation-search-input" type="text" placeholder="Search in text">
        </div>
        <div class="annotation-search-scroller">
            <table class="annotation-search-table">
                <tbody></tbody>
            </table>
        </div>
    </script>

    <script type="text/template" id="annotation-match-template">
        <tr data-id="<%= id %>">
            <td><img src="/static/images/annotation-<%- marker_style %>.svg" alt="" width="13" height="13"></td>
            <td><%= local_str.substr(0, 10) %> <%= local_str.substr(11, 8) %></td>
            <td><%- description %></td>
        </tr>
    </script>

{% endblock %}