{% extends "support.html" %}


{% block head %}
    {{ block.super }}
    <script>
        $(function () {

            $(function () {
                var threshSlide = $("#slider-range");
                threshSlide.slider({
                    range: true,
                    min: 0,
                    max: 255,
                    orientation: "vertical",
                    values: [ {{ threshold_min }}, {{ threshold_max }} ],
                    slide: function (event, ui) {
                        $("#threshold").val(ui.values[ 0 ] + " - " + ui.values[ 1 ]);
                    }

                });

                $("#threshold").val(threshSlide.slider("values", 0) +
                        " - " + threshSlide.slider("values", 1));
            });

            let thresholdUrl = "{% if not use_local_fs %}http{% if use_https %}s{% endif %}://{{ dafe_ip }}{% endif %}{% url 'support:support-load-threshold-images' wo_task_id img_file %}?";
            {% if red_channel == True %}
                thresholdUrl += "red-channel=red&";
            {% endif %}
            {% if green_channel == True %}
                thresholdUrl += "green-channel=green&";
            {% endif %}
            {% if blue_channel == True %}
                thresholdUrl += "blue-channel=blue&";
            {% endif %}
            {% if initial_view == True %}
                thresholdUrl += "initial=Y";
            {% else %}
                thresholdUrl += "threshold={{ threshold_min }}-{{ threshold_max }}";
            {% endif %}
            {% if not use_local_fs %}
                thresholdUrl += "&remote=Y";
            {% endif %}

            $.ajax({
                url: thresholdUrl,
                type: "GET",
                crossDomain: true,
                success: function (data, status, jqXHR) {
                    $('#threshold-images').html(data);
                }
            });

        });
    </script>
{% endblock %}

{% block pagehead %}
    {% include 'pagehead.html' %}
{% endblock %}

{% block content %}
    <a href="{% url 'support:support-edit-pillsig' pill_sig_id %}">Edit
        PillSig: {{ canister_serial }}</a>
    <form name="adjustThresholdForm" id="adjustThresholdForm" method="post" novalidate>
        {% csrf_token %}
        <table>
            <tr>
                <td>
                    <div>
                        <label for="threshold">Threshold Values:</label>
                        <input type="text" id="threshold" name="threshold"
                                style="border: 0; box-shadow: none; color: #f6931f; font-weight: bold;"/>
                    </div>

                    <div id="slider-range" style="height: 400px; margin-left: 20px;"></div>
                    <p>&nbsp;</p>

                    <p>
                        <label class="checkbox inline"><input type="checkbox" name="red-channel" value="red"
                                {% if red_channel == True %}checked{% endif %}> Red</label>
                        <label class="checkbox inline"><input type="checkbox" name="green-channel" value="green"
                                {% if green_channel == True %}checked{% endif %}>
                            Green</label>
                    </p>

                    <p>
                        <label class="checkbox inline"><input type="checkbox" name="blue-channel" value="blue"
                                {% if blue_channel == True %}checked{% endif %}> Blue</label>
                    </p>

                    <p>
                        <button id="apply-settings" name="apply-settings">Apply</button>
                    </p>
                    <p>
                        {% if discrepancies_only == 'Y' %}
                            <a href="{% url 'support:support-get-discrepancy-images' wo_task_id %}">Back</a>
                        {% else %}
                            <a href="{% url 'support:support-get-run-images' wo_task_id %}">Back</a>
                        {% endif %}
                    </p>
                </td>
                <td>
                    <div id="threshold-images">
                        &nbsp;
                    </div>
                    <table id="pill-signature-edit-table" class="table table-bordered" style="font-size: 9pt;">
                        <thead>
                        <tr style="background-color: lightgrey;">
                            <th class="pill-sig-td">{{ form.width }}</th>
                            <th class="pill-sig-td">{{ form.length }}</th>
                            <th class="pill-sig-td">{{ form.area }}</th>
                            <th class="pill-sig-td">{{ form.threshold_low }}</th>
                            <th class="pill-sig-td">{{ form.threshold_high }}</th>
                            <th class="pill-sig-td">{{ form.red_channel }}R<br/>{{ form.green_channel }}G<br/>{{ form.blue_channel }}B
                            </th>
                            <th class="pill-sig-td">{{ form.user_init }}</th>
                            <th class="pill-sig-td">{{ form.comments }}</th>
                            <th class="pill-sig-td">
                                <button id="apply-pillsig-edit" name="apply-pillsig-edit">Apply</button>
                                <br/>
                                <button id="confirm-pillsig" name="confirm-pillsig">Confirm</button>
                            </th>
                        </tr>
                        <tr class="dosis-report-header">
                            <th class="pill-sig-td">Width</th>
                            <th class="pill-sig-td">Len</th>
                            <th class="pill-sig-td">Area</th>
                            <th class="pill-sig-td">Thr Low</th>
                            <th class="pill-sig-td">Thr High</th>
                            <th class="pill-sig-td">RGB</th>
                            <th class="pill-sig-td">User Init</th>
                            <th class="pill-sig-td">Comments</th>
                            <th class="pill-sig-td">Action</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr style="background-color: lightgreen;">
                            <td class="pill-sig-td">{{ current_pillsig.width }}</td>
                            <td class="pill-sig-td">{{ current_pillsig.length }}</td>
                            <td class="pill-sig-td">{{ current_pillsig.area }}</td>
                            <td class="pill-sig-td">{{ current_pillsig.threshold_low }}</td>
                            <td class="pill-sig-td">{{ current_pillsig.threshold_high }}</td>
                            <td class="pill-sig-td">{% if current_pillsig.red_channel == True %}r {% endif %}
                                {% if current_pillsig.green_channel == True %}g {% endif %}
                                {% if current_pillsig.blue_channel == True %}b{% endif %}</td>
                            <td class="pill-sig-td">{{ current_pillsig.user_init }}</td>
                            <td class="pill-sig-td">{{ current_pillsig.comments }}</td>
                            <td class="pill-sig-td">&nbsp;</td>
                        </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
        </table>
    </form>
{% endblock %}