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

{% block title %} Alarm options {% endblock title %}

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


{% block content %}
<div class="container-fluid" style="height: 100%;">
	<div class="row" style="">
        <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: 600px;overflow-y: scroll">
                    <div id="treeview" style="font-size: 10px">

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

            <div class="x_panel">
                <div class="x_title">
                    <h2>
                        Filter
                    </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">
                    <div class="input-group">
                        <span class="input-group-addon" id="basic-addon3">Text</span>
                        <input type="text" id="filter_text" class="form-control" title="filter_id" onchange="filterTextChanged(this)" aria-describedby="basic-addon3">
                    </div>

                    <div id="filter_info">

                    </div>

                </div>
                <div class="x_footer">
                    <div class="btn-group btn-group-justified" data-toggle="buttons" style="padding-bottom: 10px;padding-top: 5px" >
                        <div class="btn-group" role="group">
                            <button type="button" class="btn btn-primary" onclick="filterClear()">
                                Clear
                            </button>
                        </div>
                    </div>
                </div>
            </div>

        </div>

        <div class="col-md-9 col-sm-9 col-xs-12" style="">
            <div class="row" id="ProfileRow">
                <h3 style="text-align:center; margin-top: 200pt ">
                {% if lang == 'hr'%}
                    <- Odaberite uređaj sa liste
                {% else %}
                    <- Select the device from the list
                {% endif %}
                </h3>
            </div>

            <div class="row" id= "ParameterRow">



            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block right_sidebar %}

{% 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/daterangepicker.js" %}"></script>
    <script type="text/javascript" src="{%static "js/moment.min.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/alarm_profiles.js" %}
    </script>

{% endblock %}