{% 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/alarm_profiles.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">ODABRANI DAN:</label>
					{% else %}
					    <label for="usr">SELECTED DATE:</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" style="padding-top: 5px">ODABRANI UREĐAJ:</label>
                    {% else %}
                        <label for="usr" style="padding-top: 5px">SELECTED DEVICE:</label>
                    {% endif %}
                    <input type="text" class="form-control" name='selected_device' id="selected_device" readonly />


                    {% if lang == 'hr'%}
                        <label for="usr" style="padding-top: 5px">ODABRANA MJERENJA:</label>
                    {% else %}
                        <label for="usr" style="padding-top: 5px">SELECTED MEASUREMENTS:</label>
                    {% endif %}
					<div class="btn-group btn-group-justified" data-toggle="buttons" style="padding-bottom: 10px;padding-top: 5px" >
                        <label class="btn btn-default active" >
                            <input type="checkbox" id="CH1P" value="CH1P" onchange="measurement_selection_changed(this)" checked>
                            {% if lang == 'hr'%}
                                Tlak CH1
                            {% else %}
                                Pressure CH1
                            {% endif %}
                        </label>
                        <label class="btn btn-default active">
                            <input type="checkbox" id="CH2P" value="CH2P" onchange="measurement_selection_changed(this)" checked>
                            {% if lang == 'hr'%}
                                Tlak CH2
                            {% else %}
                                Pressure CH2
                            {% endif %}
                        </label>
                        <label class="btn btn-default active" >
                            <input type="checkbox" id="CH1F" value="CH1F" onchange="measurement_selection_changed(this)" checked>
                            {% if lang == 'hr'%}
                                Protok CH1
                            {% else %}
                                Flow CH1
                            {% endif %}
                        </label>
                        <label class="btn btn-default active" >
                            <input type="checkbox" id="CH2F" value="CH2F" onchange="measurement_selection_changed(this)" checked>
                            {% if lang == 'hr'%}
                                Protok CH2
                            {% else %}
                                Flow CH2
                            {% endif %}
                        </label>
					</div>
                </div>
            </div>
        </div>
		<div class="col-sm-9" style="margin-top: 20px; ">
            <div class="row">
                <div id="draw_div" style="height: 50%;margin-left:50px;margin-right:10px;margin-bottom:20px"></div>
            </div>

            <div class="row" style="margin: 0;padding: 0">
                <div class="col-sm-6">
                    <div class="panel panel-primary" style="">
                        {% if lang == 'hr'%}
                            <div class="panel-heading" id="AlarmParametersHeading">Postavke alarma</div>
                        {% else %}
                            <div class="panel-heading" id="AlarmParametersHeading">Alarm settings</div>
                        {% endif %}

                        <div class="panel-body" id="AlarmParametersPanel" style="padding-top: 0">

                        </div>
                        <div class="panel-footer" id="AlarmParametersPanelFooter">
                            <div class="btn-group btn-group-justified" role="group" data-toggle="buttons" style="padding-bottom: 10px">
                                <div class="btn-group" role="group">
                                    <button id="SaveParameters" type="button" onclick="saveChangedParams()" class="btn btn-default">
                                        {% if lang == 'hr'%}
                                            Spremi parametre
                                        {% else %}
                                            Save parameters
                                        {% endif %}
                                    </button>
                                </div>
                                <div class="btn-group" role="group">
                                    <button id="RefreshParameters" type="button" onclick="refreshParams()" class="btn btn-default">
                                        {% if lang == 'hr'%}
                                            Osvjezi parametre
                                        {% else %}
                                            Refresh parameters
                                        {% endif %}
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="panel panel-primary">

                        {% if lang == 'hr'%}
                            <div class="panel-heading" id="AlarmProfilesHeading">Postavke alarma
                        {% else %}
                            <div class="panel-heading" id="AlarmProfilesHeading">Alarm settings
                        {% endif %}
                            </div>
                        <div class="panel-body">
                            {% if lang == 'hr'%}
                                <label for="usr" style="padding-top: 5px">ZELJENO IME PROFILA:</label>
                            {% else %}
                                <label for="usr" style="padding-top: 5px">LOCAL PROFILE NAME:</label>
                            {% endif %}
                            <input type="text" class="form-control" name='alarm_profile_name' id="alarm_profile_name" maxlength="14" style="margin-bottom: 10px"/>

                            {% if lang == 'hr'%}
                                <label for="usr" style="padding-top: 5px">TRENUTNO IME PROFILA:</label>
                            {% else %}
                                <label for="usr" style="padding-top: 5px">REMOTE PROFILE NAME:</label>
                            {% endif %}
                            <input type="text" class="form-control" name='alarm_profile_name_rem' id="alarm_profile_name_rem" maxlength="14" style="margin-bottom: 10px" readonly/>

                        </div>
                        <div class="panel-footer">
                            <div class="btn-group btn-group-justified" role="group" data-toggle="buttons" style="padding-bottom: 10px">
                                <div class="btn-group" role="group">
                                    <button id="SaveProfile" type="button" onclick="saveCurrentProfile(this)" class="btn btn-default">Save profile</button>
                                </div>
                                <div class="btn-group" role="group">
                                    <button id="SaveProfile" type="button" onclick="resetCurrentProfile(this)" class="btn btn-default">Reset profile</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </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>
    {% include "ll_js/alarm_profiles.js" %}
</script>

{% endblock %}