{% 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">
        <div class="col-md-9 col-sm-9 col-xs-12">
            <div class="x_panel">
                <div class="x_title">
                    <h2>
                        {% if lang == 'hr'%}
                            Prikaz:
                        {% else %}
                            Graph:
                        {% endif %}
                        {{ plot.name }} {{ plot.unit }}
                    </h2>
                    <ul class="nav navbar-right panel_toolbox">
                        <li><a class="collapse-link-modal"><i class="fa fa-chevron-up"></i></a>
                        </li>
                    </ul>
                    <div class="clearfix"></div>
                </div>
                <div class="x_content container" style="">
                    <div id="plot_measurement_{{ forloop.counter0 }}" style = "height:500px;">
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-sm-3 col-xs-12">
            <div class="x_panel">
                <div class="x_title">
                    <h2>
                        {% if lang == 'hr'%}
                            Opcije prikaza
                        {% else %}
                            Graph options
                        {% endif %}
                    </h2>
                    <ul class="nav navbar-right panel_toolbox">
                        <li><a class="collapse-link-modal"><i class="fa fa-chevron-up"></i></a>
                        </li>
                    </ul>
                    <div class="clearfix"></div>
                </div>
                <div class="x_content container" style="">
                    <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_restoreZoom_{{ forloop.counter0 }}" type="button" class="btn btn-default" onclick="plot_measurement_restoreGraphZoomClick(this,{{ forloop.counter0 }})" style="width: 90%" href="#">
                            <span class="glyphicon glyphicon-fullscreen" aria-hidden="true"></span>
                            {% if lang == 'hr'%}
                                Vrati prikaz
                            {% else %}
                                Reset view
                            {% endif %}
                        </button>
                    </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="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="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="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 %}
                </div>
            </div>

        </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>


<script type="text/javascript">
    $(document).ready(function(){
        InitPanelsModal();
    });
</script>