{% load staticfiles %}

<div class="btn-group btn-group-lg" style="color: #000000; font-size: 20px; position: absolute; right: 5%">
    <button type="button" class="btn btn-default" onclick="plot_measurement_printMeasurementPlot()">
        <span class="glyphicon glyphicon-print" aria-hidden="true"></span>
    </button>
    <button type="button" class="btn btn-default" data-dismiss="modal">
        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
    </button>
</div>

<h3  id="plot_measurement_title" class="modal-title" align="center" style="margin-top:40px;font-size:16px;margin-bottom:40px">
    {{ title_string_top }}
    <br>
    {{ title_string_bottom }}
</h3>

<div id="plot_measurement_annotationTooltip" data-role="popup" data-toggle="tooltip" title=""></div>

{% for plot in datasets %}
    <div class="row">
        {% if user_device_type == "mobile" %}
            <div class="col-sm-9" style="margin-right: 20px">
                <h5>
                    {{ plot.name }} {{ plot.unit }}
                </h5>
                <div id="plot_measurement_{{ forloop.counter0 }}" style = "margin-right:10px;width:100%;margin-bottom:10px;">
                </div>
            </div>
        {% elif user_device_type == "desktop" %}
            <div class="col-sm-9">
                <div id="plot_measurement_{{ forloop.counter0 }}" style = "height:500px;margin-bottom:40px;margin-left:50px;margin-right:10px;">
                </div>
            </div>
        {% endif %}
        <div class="col-sm-3">
            {% if user_device_type == "mobile" %}
                <div class="row">
                    <label class="btn-group btn-group-justified" data-toggle="buttons" style="padding-bottom: 10px;width: 90%">
                        <label class="btn btn-default btn-xs" style="width: 100%">
                            <input id="plot_measurement_spinAvg_{{ forloop.counter0 }}" type="text" value="1" name="{{ forloop.counter0 }}">
                        </label>
                        <label id="plot_measurement_restoreZoom_{{ forloop.counter0 }}" type="button" class="btn btn-default btn-xs" onclick="plot_measurement_restoreGraphZoomClick(this,{{ forloop.counter0 }})" style="width:100%" href="#">
                            <span class="glyphicon glyphicon-fullscreen" aria-hidden="true">
                            </span>
                            {% if lang == 'hr'%}
                                Vrati
                            {% else %}
                                Reset
                            {% endif %}
                        </label>
                    </label>
                </div>
            {% elif user_device_type == "desktop" %}

                <div class="row" >

                    <div style="width:90%;margin-top: 5px; margin-bottom: 5px;">
                        <input id="plot_measurement_spinAvg_{{ forloop.counter0 }}" type="text" value="1" name="{{ forloop.counter0 }}" >
                    </div>
                </div>
                <div class="row">
                    <button id="plot_measurement_initiateExport_{{ forloop.counter0 }}" type="button" class="btn btn-default" onclick="plot_measurement_exportClick(this,{{ forloop.counter0 }})" style="margin-top: 10px; margin-bottom: 5px;width: 90%" href="#">
                        <span class="glyphicon glyphicon-picture" aria-hidden="true">
                        </span>
                        {% if lang == 'hr'%}
                            Izvezi {{ plot.ime }}
                        {% else %}
                            Export {{ plot.name }}
                        {% endif %}
                    </button>
                </div>
                <div class="row">
                    <label class="btn btn-default" style=";margin-top: 5px; margin-bottom: 5px;width: 90%">
                        <input type="checkbox" id="plot_measurement_highlightWeekendsCheckbox_{{ forloop.counter0 }}" onclick="plot_measurement_highlightWeekendsClick(this,{{ forloop.counter0 }})" href="#">
                        <span class="glyphicon glyphicon-calendar" aria-hidden="true">
                        </span>
                        {% if lang == 'hr'%}
                            Oznaci vikende
                        {% else %}
                            Highlight weekends
                        {% endif %}
                    </label>
                </div>
                <div class="row">
                    <label class="btn btn-default" style=";margin-top: 5px; margin-bottom: 10px;width: 90%">
                        <input type="checkbox" id="plot_measurement_dynamicAnalizeCheckbox_{{ forloop.counter0 }}" onclick="plot_measurement_dynamicAnalizeClick(this,{{ forloop.counter0 }})" href="#">
                        <span class="glyphicon glyphicon-equalizer" aria-hidden="true">
                        </span>
                        {% if lang == 'hr'%}
                            Dinamička analiza
                        {% else %}
                            Dynamic analize
                        {% endif %}
                    </label>
                </div>
                <img id="plot_measurement_exportedImage_{{ forloop.counter0 }}" style="width:0;height:0;"/>
                <div class="row">
                    <div id="plot_measurement_statisticsPanel_{{ forloop.counter0 }}" style="display:none;">
                        <div class="panel panel-default" style="width: 90%;">
                            <div class="panel-heading">
                                <h6 class="panel-title">
                                    {% if lang == 'hr'%}
                                        Statistika
                                    {% else %}
                                        Statistics
                                    {% endif %}
                                    {{ plot.unit }}
                                </h6>
                            </div>
                            <div class="panel-body" style="padding: 0">
                                <div class="modal-body">
                                    <ul class="nav nav-tabs" id="plot_measurement_statisticsPanel_{{ forloop.counter0 }}_tabs">
                                        {% for channel in plot.label_data %}
                                            <li {% if forloop.counter0 == 0 %} class="active" {% endif %}>
                                                <a data-toggle="tab" href="#plot_measurement_{{ forloop.parentloop.counter0 }}_channel_{{ forloop.counter0 }}_tab">
                                                {{ channel }}
                                                </a>
                                            </li>
                                        {% endfor %}
                                    </ul>
                                    <div class="tab-content">
                                        {% for channel in plot.label_data %}
                                            <div id="plot_measurement_{{ forloop.parentloop.counter0 }}_channel_{{ forloop.counter0 }}_tab" class="tab-pane fade {% if forloop.counter0 == 0 %} in active  {% endif %}" style="margin-top: 15px">

                                                <div class="input-group" style="margin-bottom: 5px">
                                                    <span class="input-group-addon" id="basic-addon3" style="min-width: 100px">Max:</span>
                                                    <input type="text" aria-describedby="basic-addon3" style="text-align:center;" id="plot_measurement_{{ forloop.parentloop.counter0 }}_channel_{{ forloop.counter0 }}_max" class="form-control input-sm" readonly />
                                                </div>

                                                <div class="input-group" style="margin-bottom: 5px">
                                                    <span class="input-group-addon" id="basic-addon3" style="min-width: 100px">Avg:</span>
                                                    <input type="text" aria-describedby="basic-addon3" style="text-align:center;" id="plot_measurement_{{ forloop.parentloop.counter0 }}_channel_{{ forloop.counter0 }}_avg" class="form-control input-sm" readonly />
                                                </div>

                                                <div class="input-group" style="margin-bottom: 5px">
                                                    <span class="input-group-addon" id="basic-addon3" style="min-width: 100px">Min:</span>
                                                    <input type="text" aria-describedby="basic-addon3" style="text-align:center;" id="plot_measurement_{{ forloop.parentloop.counter0 }}_channel_{{ forloop.counter0 }}_min" class="form-control input-sm" readonly />
                                                </div>
                                            </div>
                                        {% endfor %}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                {% if plot.show_total_panel == True %}
                    <div class="row">
                        <div id="plot_measurement_totalFlowPanel_{{ forloop.counter0 }}">

                            <div class="panel panel-default" style="width: 90%;">
                                <div class="panel-heading">
                                    <h6 class="panel-title">
                                        {% if lang == 'hr'%}
                                            Total
                                        {% else %}
                                            Total
                                        {% endif %}
                                        {{ plot.unit }}
                                    </h6>
                                </div>
                                <div class="panel-body" style="">
                                    {% for channel in plot.label_data %}

                                        <div class="input-group" style="margin-bottom: 5px;">
                                            <span class="input-group-addon" id="basic-addon3" style="min-width: 100px">{{ channel }} Total</span>
                                            <input type="text" aria-describedby="basic-addon3" style="text-align:center;" id="plot_measurement_{{ forloop.parentloop.counter0 }}_channel_{{ forloop.counter0 }}_total" class="form-control input-sm" value="?" readonly />
                                        </div>
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                    </div>
                {% endif %}
            {% endif %}
        </div>
    </div>
{% endfor %}


<div class="modal fade" tabindex="-1" role="dialog" id="plot_measurement_myModalAnnotationEdit">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" data-number="1" class="close" aria-label="Close" onclick="plot_measurement_closeAnnotationEdit()"><span aria-hidden="true">&times;</span></button>
                    {% if lang == 'hr'%}
                            <h4 class="modal-title">Promjeni oznaku</h4>
				        {% else %}
                            <h4 class="modal-title">Edit annotation</h4>
				        {% endif %}
            </div>
            <div class="modal-body">
                <div class="input-group input-group" style="padding-bottom: 10px">
                    <span class="input-group-addon" id="sizing-addon2" style="min-width: 100px">
                        {% if lang == 'hr'%}
                            ID
                        {% else %}
                            ID
                        {% endif %}
                    </span>
                    <input id="plot_measurement_EditAnnotationID" type="text" class="form-control" placeholder="" aria-describedby="sizing-addon2"  readonly>
                </div>
                <div class="input-group input-group" style="padding-bottom: 10px">
                    <span class="input-group-addon" id="sizing-addon2" style="min-width: 100px">
                        {% if lang == 'hr'%}
                            Identifikator
                        {% else %}
                            Identifier
                        {% endif %}
                    </span>
                    <input id="plot_measurement_EditAnnotationIdentifier" type="text" class="form-control" placeholder="" aria-describedby="sizing-addon2"  readonly>
                </div>
                <div class="input-group input-group" style="padding-bottom: 10px">
                    <span class="input-group-addon" id="sizing-addon2" style="min-width: 100px">
                        {% if lang == 'hr'%}
                            Vrijeme
                        {% else %}
                            Time
                        {% endif %}
                    </span>
                    <input id="plot_measurement_EditAnnotationTime" type="text" class="form-control" placeholder="" aria-describedby="sizing-addon2" readonly>
                </div>
                <div class="input-group input-group" style="padding-bottom: 10px">
                    <span class="input-group-addon" id="sizing-addon2" style="min-width: 100px">
                        {% if lang == 'hr'%}
                            Graf
                        {% else %}
                            Chart
                        {% endif %}
                    </span>
                    <input id="plot_measurement_EditAnnotationChart" type="text" class="form-control" placeholder="" aria-describedby="sizing-addon2" readonly>
                </div>
                {% if lang == 'hr'%}
                    <h5 class="modal-title">Tekst oznake:</h5>
                {% else %}
                    <h5 class="modal-title">Annotation text:</h5>
                {% endif %}
                <textarea id="plot_measurement_EditAnnotationText" class="span6" rows="5" placeholder="Enter note" style="width: 100%" maxlength="140" required></textarea>
            </div>
            <div class="btn-group btn-group-justified" data-toggle="buttons" style="padding: 10px" >
                {% for annotation_icon in annotation_icon_list %}
                    <label class="btn btn-default" id="plot_measurement_EditAnnotationImgBtn_{{ forloop.counter }}">
                        <input type="radio" id="plot_measurement_EditAnnotationImg_{{ forloop.counter }}" value="{{ annotation_icon }}">
                        <img src="{%static annotation_icon %}">
                    </label>
                {% endfor %}
            </div>
            <div class="modal-footer">
                {% if lang == 'hr'%}
                    <button type="button" class="btn btn-default" onclick="plot_measurement_closeAnnotationEdit()">Zatvori</button>
                    <button type="button" class="btn btn-primary" onclick="plot_measurement_editAnnotationHandler()">Spremi oznaku</button>
                    <button type="button" class="btn btn-primary" onclick="plot_measurement_deleteAnnotationHandler()">Ukloni oznaku</button>
                {% else %}
                    <button type="button" class="btn btn-default" onclick="plot_measurement_closeAnnotationEdit()">Close</button>
                    <button type="button" class="btn btn-primary" onclick="plot_measurement_editAnnotationHandler()">Save annotation</button>
                    <button type="button" class="btn btn-primary" onclick="plot_measurement_deleteAnnotationHandler()">Delete annotation</button>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<div class="modal fade" tabindex="-1" role="dialog" id="plot_measurement_myModalAnnotationAdd">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" data-number="2" class="close" aria-label="Close" onclick="plot_measurement_closeAnnotationAdd()"><span aria-hidden="true">&times;</span></button>
                {% if lang == 'hr'%}
                    <h4 class="modal-title">Dodaj oznaku</h4>
                {% else %}
                    <h4 class="modal-title">Add annotation</h4>
                {% endif %}
            </div>
            <div class="modal-body">
                <div class="input-group input-group" style="padding-bottom: 10px">
                    <span class="input-group-addon" id="sizing-addon2" style="min-width: 100px">
                        {% if lang == 'hr'%}
                            ID
                        {% else %}
                            ID
                        {% endif %}
                    </span>
                    <input id="plot_measurement_AddAnnotationID" type="text" class="form-control" placeholder="" aria-describedby="sizing-addon2"  readonly>
                </div>
                <div class="input-group input-group" style="padding-bottom: 10px">
                    <span class="input-group-addon" id="sizing-addon2" style="min-width: 100px">
                        {% if lang == 'hr'%}
                            Identifikator
                        {% else %}
                            Identifier
                        {% endif %}
                    </span>
                    <input id="plot_measurement_AddAnnotationIdentifier" type="text" class="form-control" placeholder="" aria-describedby="sizing-addon2"  readonly>
                </div>
                <div class="input-group input-group" style="padding-bottom: 10px">
                    <span class="input-group-addon" id="sizing-addon2" style="min-width: 100px">
                        {% if lang == 'hr'%}
                            Vrijeme
                        {% else %}
                            Time
                        {% endif %}
                    </span>
                    <input id="plot_measurement_AddAnnotationTime" type="text" class="form-control" placeholder="" aria-describedby="sizing-addon2" readonly>
                    <input id="plot_measurement_AddAnnotationEpochTime" type="hidden" class="form-control" placeholder="" aria-describedby="sizing-addon2" readonly>
                </div>
                <div class="input-group input-group" style="padding-bottom: 10px">
                    <span class="input-group-addon" id="sizing-addon2" style="min-width: 100px">
                        {% if lang == 'hr'%}
                            Graf
                        {% else %}
                            Chart
                        {% endif %}
                    </span>
                    <input id="plot_measurement_AddAnnotationChart" type="text" class="form-control" placeholder="" aria-describedby="sizing-addon2" readonly>
                </div>
                {% if lang == 'hr'%}
                    <h5 class="modal-title">Tekst oznake:</h5>
                {% else %}
                    <h5 class="modal-title">Annotation text:</h5>
                {% endif %}
                <textarea id="plot_measurement_AddAnnotationText" class="span6" rows="5" placeholder="Enter note" style="width: 100%" maxlength="140" required></textarea>
            </div>
            <div class="btn-group btn-group-justified" data-toggle="buttons" style="padding: 10px" >

                {% for annotation_icon in annotation_icon_list  %}
                    <label class="btn btn-default {% if forloop.counter == 1 %}active {% endif %}" id="plot_measurement_AddAnnotationImgBtn_{{ forloop.counter }}">
                        <input type="radio" id="plot_measurement_AddAnnotationImg_{{ forloop.counter }}" value="{{ annotation_icon }}" checked>
                        <img src="{%static annotation_icon %}">
                    </label>
                {% endfor %}
            </div>
            <div class="modal-footer">
                {% if lang == 'hr'%}
                    <button type="button" class="btn btn-default" onclick="plot_measurement_closeAnnotationAdd()">Zatvori</button>
                    <button type="button" class="btn btn-primary" onclick="plot_measurement_addAnnotationHandler()">Spremi oznaku</button>
                {% else %}
                    <button type="button" class="btn btn-default" onclick="plot_measurement_closeAnnotationAdd()">Close</button>
                    <button type="button" class="btn btn-primary" onclick="plot_measurement_addAnnotationHandler()">Save annotation</button>
                {% endif %}
            </div>
        </div>
    </div>
</div>


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