{% extends "base.html" %}
{% block content %}

<style xmlns="http://www.w3.org/1999/html">
    {% include "ll_css/tracking.css" %}
</style>
<div id="hairline-template" class="hairline-info" style="display:none">
      <button class='hairline-kill-button'>Kill</button>
      <div class='hairline-legend'></div>
</div>
<div class="container-fluid" style="height: 100%; margin-bottom: 50px">
	<div class="row" style="margin-top: 30px">
		<div class="col-sm-3" style="margin-top: 20px">


            <div class="panel panel-primary" style="max-height: 50%;overflow-y: scroll">
                {% if lang == 'hr'%}
                    <div class="panel-heading">Popis uređaja</div>
                {% else %}
                    <div class="panel-heading">Device list</div>
                {% endif %}


                <div class="panel-body">
                    <div id="treeview" style="">

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

            <div class="panel panel-primary">
                {% if lang == 'hr'%}
                    <div class="panel-heading">Opcije</div>
                {% else %}
                    <div class="panel-heading">Options</div>
                {% endif %}

                <div class="panel-body">

					{% 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-sm-9" style="margin-top: 20px; ">
            <div class="row">
		        <div class="col-sm-10" style="margin-top: 20px">
                    <div id="graph_pressure" style = "margin-right:20px;width:100%;height:42%">
                    </div>
                </div>
		        <div class="col-sm-2" style="margin-top: 20px">
                    <div id="graph_pressure_legend" style = "">
                    </div>
                </div>
            </div>
            <div class="row">
		        <div class="col-sm-10" style="margin-top: 20px">
                    <div id="graph_flow" style = "margin-right:20px;width:100%;height:42%">
                    </div>
                </div>
		        <div class="col-sm-2" style="margin-top: 20px">
                    <div id="graph_flow_legend" style = "">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


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

{% endblock %}