{% extends "base/base.html" %}
{% load staticfiles %}

{% block title %} Tracking {% endblock title %}

{% block stylesheets %}
    {{ block.super}}
{% endblock %}


{% block content %}

        <div class="col-md-3 col-sm-3 col-xs-12" style="">
            <div class="x_panel">
                <div class="x_title">
                    <h2>
                        {% if lang == 'hr'%}
                            Popis uređaja
                        {% else %}
                            Device list
                        {% endif %}
                    </h2>
                    <ul class="nav navbar-right panel_toolbox">
                        <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                        </li>
                    </ul>
                    <div class="clearfix"></div>
                </div>
                <div class="x_content" style="max-height: 300px;overflow-y: scroll">
                    <div id="treeview" style="font-size: 10px">

                    </div>
                </div>
            </div>

            <div class="x_panel">
                <div class="x_title">
                    <h2>
                        {% if lang == 'hr'%}
                            Opcije
                        {% else %}
                            Options
                        {% endif %}
                    </h2>
                    <ul class="nav navbar-right panel_toolbox">
                        <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                        </li>
                    </ul>
                    <div class="clearfix"></div>
                </div>
                <div class="x_content" style="">

                    {% if lang == 'hr'%}
                        <label for="usr">INTERVAL PREGLEDA:</label>
                    {% else %}
                        <label for="usr">MONITOR RANGE:</label>
                    {% endif %}
                    <div class="btn-group btn-group-justified" data-toggle="buttons" style="padding-bottom: 10px">
                        <label class="btn btn-default">
                            <input type="radio" name="options" id="CI1" value="CI1" autocomplete="off" onchange= "monitorIntevalChangedHandle(1)" > 1h
                        </label>
                        <label class="btn btn-default">
                            <input type="radio" name="options" id="CI2" value="CI2" autocomplete="off" onchange= "monitorIntevalChangedHandle(2)"> 2h
                        </label>
                        <label class="btn btn-default">
                            <input type="radio" name="options" id="CI4" value="CI4" autocomplete="off" onchange= "monitorIntevalChangedHandle(4)"> 4h
                        </label>
                        <label class="btn btn-default active">
                            <input type="radio" name="options" id="CI6" value="CI6" autocomplete="off" onchange= "monitorIntevalChangedHandle(6)" checked> 6h
                        </label>
                    </div>
                    {% if lang == 'hr'%}
                        <label for="usr">INTERVAL OSVJEŽAVANJA:</label>
                    {% else %}
                        <label for="usr">REFRESH INTERVAL:</label>
                    {% endif %}
                    <div class="btn-group btn-group-justified" data-toggle="buttons" style="padding-bottom: 10px">
                        <label class="btn btn-default active">
                            <input type="radio" name="options" id="CR10" value="CR10" autocomplete="off" onchange= "monitorRefreshChangedHandle(10)" checked> 10sec
                        </label>
                        <label class="btn btn-default">
                            <input type="radio" name="options" id="CR30" value="CR30" autocomplete="off" onchange= "monitorRefreshChangedHandle(30)"> 30sec
                        </label>
                        <label class="btn btn-default">
                            <input type="radio" name="options" id="CR60" value="CR60" autocomplete="off" onchange= "monitorRefreshChangedHandle(60)"> 1min
                        </label>
                        <label class="btn btn-default">
                            <input type="radio" name="options" id="CR120" value="CR120" autocomplete="off" onchange= "monitorRefreshChangedHandle(120)"> 2min
                        </label>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-9 col-sm-9 col-xs-12" style="">
            <div class="row" style="height:50%;">

                <div class="x_panel">
                    <div class="x_title">
                        <h2>
                            {% if lang == 'hr'%}
                                Analogni
                            {% else %}
                                Analog
                            {% endif %}
                        </h2>
                        <ul class="nav navbar-right panel_toolbox">
                            <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                            </li>
                        </ul>
                        <div class="clearfix"></div>
                    </div>
                    <div class="x_content" style="">
                        <div class="col-md-10 col-sm-10 col-xs-12" style="">

                            <div id="graph_1" style = "width: 100%">
                            </div>
                        </div>
                        <div class="col-md-2 col-sm-2 col-xs-12" style="">
                            <div id="graph_1_legend" style = "">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row" style="height:50%;">

                <div class="x_panel">
                    <div class="x_title">
                        <h2>
                            {% if lang == 'hr'%}
                                Impulsi frekvencija
                            {% else %}
                                Pulse frequency
                            {% endif %}
                        </h2>
                        <ul class="nav navbar-right panel_toolbox">
                            <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                            </li>
                        </ul>
                        <div class="clearfix"></div>
                    </div>
                    <div class="x_content" style="">
                        <div class="col-md-10 col-sm-10 col-xs-12" style="">

                            <div id="graph_2" style = "width: 100%">
                            </div>
                        </div>
                        <div class="col-md-2 col-sm-2 col-xs-12" style="">
                            <div id="graph_2_legend" style = "">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

{% endblock %}

{% block right_sidebar %}
    test1231232
{% endblock %}

{% block javascripts %}
    {{ block.super}}
    <script type="text/javascript" src="{%static "dygraph/dygraph-custom-labels.js" %}"></script>
    <script type="text/javascript" src="{%static "dygraph/dygraph-export.js" %}"></script>
    <script type="text/javascript" src="{%static "dygraph/dygraph-synchronize.js" %}"></script>
    <script type="text/javascript" src="{%static "js/bootstrap-treeview.js" %}"></script>
    <script type="text/javascript" src="{%static "js/dateformat.js" %}"></script>

    <script>
        {% include "ll_js/tracking.js" %}
    </script>

{% endblock %}