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

{% load staticfiles %}

<link rel="stylesheet" href="{%static "css/daterangepicker.css" %}"/>

<style xmlns="http://www.w3.org/1999/html">
    {% include "ll_css/totalizers.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%;">
	<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 PROMATRANJA:</label>
					{% else %}
					    <label for="usr">DATE INTERVAL:</label>
					{% endif %}
                    <div id="reportrange" style="background: #fff; cursor: pointer; padding: 5px 10px; margin-bottom: 5pt; border: 1px solid #ccc; width: 100%; text-align: center">
                        <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>&nbsp;
                        <span></span> <b class="caret"></b>
                    </div>
                    {% if lang == 'hr'%}
					    <label for="usr">EXPORT PODATAKA:</label>
					{% else %}
					    <label for="usr">DATA EXPORT:</label>
					{% endif %}
                    <form id = "ExcelDownloadForm" method = "post" hidden>
                        {% csrf_token %}
                    </form>
                    <div class="btn-group btn-group-justified" role="group" data-toggle="buttons" style="padding-bottom: 10px">
                        <div class="btn-group" role="group">
                            <button id="ExportToExcel" type="button" onclick="exportToExcel(this)" class="btn btn-default">
                                {% if lang == 'hr'%}
                                    Izvoz podataka u Excel
                                {% else %}
                                    Export to excel
                                {% endif %}
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
		<div class="col-sm-9" style="margin-top: 20px; ">
            <div class="row">
                <div id="highplot" style="min-width: 310px; height: 70%; margin: 0 auto; "></div>
            </div>
            <div class="row" style="height: 20%;overflow: auto;">
                <table id="_totalizerTable" style="font-size: 10pt;" class="table table-bordered table-hover table-condensed table-responsive" cellspacing="0" width="100%" align="center" >
                    <thead>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="{%static "js/daterangepicker.js" %}"></script>
<script type="text/javascript" src="{%static "js/moment.min.js" %}"></script>

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

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

{% endblock %}