{% extends "train-base.html" %}


{% block header-extras %}
    <script>
        function debounce(func, wait, immediate) {
            let timeout;
            return function () {
                let context = this, args = arguments;
                let later = function () {
                    timeout = null;
                    if (!immediate) func.apply(context, args);
                };
                let callNow = immediate && !timeout;
                clearTimeout(timeout);
                timeout = setTimeout(later, wait);
                if (callNow) func.apply(context, args);
            };
        }

        function show_save_setting_button(visible) {
            if (visible == true) {
                $("#set-value-button").show();
                $("#go-setting-btn").show();
            } else {
                $("#set-value-button").hide();
                $("#go-setting-btn").hide();
            }
        }

        function clear_position() {
            $("#axis-current-pos").html("Current Axis Position: ----");
        }

        function move_train_axis(command) {
            clear_position();
            $.post("{% url 'L60Train:train-move-axis' %}", {
                command: command,
                move_amount: $("#axis-move-amount").val(),
                csrfmiddlewaretoken: '{{csrf_token}}'
            });
        }

        function update_axis_position_data() {
            var axis = '{{ current_axis }}';
            $.post("{% url 'L60Train:train-get-axis-position' %}", {
                axis: axis.replace("AXIS_", ""),
                csrfmiddlewaretoken: '{{csrf_token}}'
            }, function (data) {
                $("#axis-current-pos").html("Current Axis Position: " + data + " in.");
            });
        }

        function get_position_db_value() {
            $.post("{% url 'L60Train:get-axis-location-db' %}", {
                settingid: $('input[type=radio][name=task-select]:checked').val(),
                csrfmiddlewaretoken: '{{csrf_token}}'
            }, function (data) {
                $("#axis-db-setting").html(data);
            });
        }

        function send_train_command(command) {
            $.post("{% url 'L60Train:train-command' %}", {
                command: command,
                data: 'Y',
                csrfmiddlewaretoken: '{{csrf_token}}'
            });
        }

        function send_module_train_command(command, setting) {
            clear_position();

            $.post("{% url 'L60Train:train-module-command' %}", {
                command: command,
                data: setting,
                csrfmiddlewaretoken: '{{csrf_token}}'
            });
        }

        $(function () {
            $("#step-select-group").buttonset();
            $("#task-select-group").buttonset();

            $("#exit-button").click(function () {
                window.location.href = "{% url 'L60Train:train-menu' %}";
            });

            $('input[type=radio][name=step-select]').click(function () {
                $('input[name="task-select"]').prop('checked', false);
                document.trainModuleForm.submit();
            });

            $('input[type=radio][name=task-select]').click(function () {
                document.trainModuleForm.submit();
            });

            $("#go-next-step-btn").click(debounce(function () {
                if ($('#go-setting-btn').length) {
                   let selsetting = $('input[type=radio][name=task-select]:checked').val();
                   clear_position();

                   $.post("{% url 'L60Train:train-module-command' %}", {
                       command: "go",
                       data: selsetting,
                       csrfmiddlewaretoken: '{{csrf_token}}'
                   }, function (data) {
                        $("#next-step").val("Y");
                        document.trainModuleForm.submit();
                    });
                } else {
                    {% if current_action == 'bsf-retrieve-card' %}
                    $("#bsf-pump-btn").val("on");
                    $("#bsf-pump-btn").css('background-color', 'lightgreen');
                    {% endif %}
                    $.post("{% url 'L60Train:train-perform-action' %}", {
                        command: '{{ current_action }}',
                        csrfmiddlewaretoken: '{{csrf_token}}'
                    }, function (data) {
                        $("#next-step").val("Y");
                        document.trainModuleForm.submit();
                    });
                }
            }, 750));

            $("#go-setting-btn").click(function () {
                var selsetting = $('input[type=radio][name=task-select]:checked').val();
                send_module_train_command("go", selsetting);
            });

            $("#train-module-stop").click(function () {
                send_train_command('train-module-stop');
            });

            $("#update-position-button").click(function () {
                update_axis_position_data();
            });

            $("#a-back-btn").click(function () {
                move_train_axis('a-move-back');
            });

            $("#a-front-btn").click(function () {
                move_train_axis('a-move-front');
            });

            $("#b-right-btn").click(function () {
                move_train_axis('b-move-right');
            });

            $("#b-left-btn").click(function () {
                move_train_axis('b-move-left');
            });

            $("#c-up-btn").click(function () {
                move_train_axis('c-move-up');
            });

            $("#c-down-btn").click(function () {
                move_train_axis('c-move-down');
            });

            $("#e-right-btn").click(function () {
                move_train_axis('e-move-right');
            });

            $("#e-left-btn").click(function () {
                move_train_axis('e-move-left');
            });

            $("#f-up-btn").click(function () {
                move_train_axis('f-move-up');
            });

            $("#f-down-btn").click(function () {
                move_train_axis('f-move-down');
            });

            $("#g-back-btn").click(function () {
                move_train_axis('g-move-back');
            });

            $("#g-front-btn").click(function () {
                move_train_axis('g-move-front');
            });

            $("#h-up-btn").click(function () {
                move_train_axis('h-move-up');
            });

            $("#h-down-btn").click(function () {
                move_train_axis('h-move-down');
            });

            $("#u-back-btn").click(function () {
                move_train_axis('u-move-back');
            });

            $("#u-front-btn").click(function () {
                move_train_axis('u-move-front');
            });

            $("#v-left-btn").click(function () {
                move_train_axis('v-move-left');
            });

            $("#v-right-btn").click(function () {
                move_train_axis('v-move-right');
            });

            $("#x-back-btn").click(function () {
                move_train_axis('x-move-back');
            });

            $("#x-front-btn").click(function () {
                move_train_axis('x-move-front');
            });

            $("#y-left-btn").click(function () {
                move_train_axis('y-move-left');
            });

            $("#y-right-btn").click(function () {
                move_train_axis('y-move-right');
            });

            $("#z-up-btn").click(function () {
                move_train_axis('z-move-up');
            });

            $("#z-down-btn").click(function () {
                move_train_axis('z-move-down');
            });

            $("#set-value-button").click(function () {
                $.post("{% url 'L60Train:save-axis-location-db' %}", {
                    settingid: $('input[type=radio][name=task-select]:checked').val(),
                    csrfmiddlewaretoken: '{{csrf_token}}'
                }, function (data) {
                    $("#axis-current-pos").html("Current Axis Position: " + data);
                    alert("Axis Location Value Saved.");
                    get_position_db_value();
                });
            });

            $("#bsf-pump-btn").click(function () {
                if ($(this).val() == "off") {
                    $(this).val("on");
                    $(this).css('background-color', 'lightgreen');
                } else {
                    $(this).val("off");
                    $(this).css('background-color', 'darkgray');
                }

                $.post("{% url 'L60Train:train-command' %}", {
                    command: 'bsf-pump',
                    data: $(this).val(),
                    csrfmiddlewaretoken: '{{csrf_token}}'
                });
            });

            $("#eoat-light-btn").click(function () {
                if ($(this).val() == "off") {
                    $(this).val("on");
                    $(this).css('background-color', 'lightyellow');
                } else {
                    $(this).val("off");
                    $(this).css('background-color', 'darkgray');
                }

                $.post("{% url 'L60Train:train-command' %}", {
                    command: 'eoat-lights',
                    data: $(this).val(),
                    csrfmiddlewaretoken: '{{csrf_token}}'
                });
            });

            $("#flipper-pump-btn").click(function () {
                if ($(this).val() == "off") {
                    $(this).val("on");
                    $(this).css('background-color', 'lightgreen');
                } else {
                    $(this).val("off");
                    $(this).css('background-color', 'darkgray');
                }

                $.post("{% url 'L60Train:train-command' %}", {
                    command: 'flipper-pump',
                    data: $(this).val(),
                    csrfmiddlewaretoken: '{{csrf_token}}'
                });
            });

            $("#trolley-pump-btn").click(function () {
                if ($(this).val() == "off") {
                    $(this).val("on");
                    $(this).css('background-color', 'lightgreen');
                } else {
                    $(this).val("off");
                    $(this).css('background-color', 'darkgray');
                }

                $.post("{% url 'L60Train:train-command' %}", {
                    command: 'trolley-pump',
                    data: $(this).val(),
                    csrfmiddlewaretoken: '{{csrf_token}}'
                });
            });

            {% if show_BSF_pump %}
                $("#bsf-pump-btn-div").show();
            {% endif %}

            {% if show_EOAT_light %}
                $("#eoat-light-btn-div").show();
            {% endif %}

            {% if show_flipper_pump %}
                $("#flipper-pump-btn-div").show();
            {% endif %}

            {% if show_trolley_pump %}
                $("#trolley-pump-btn-div").show();
            {% endif %}

            {% if show_save %}

                var moveAdjValues = ["0.01", "0.05", "0.1", "0.5", "1", "2", "3", "4", "5"];
                var moveAdjIndex = 1;
                var moveVal = $('#axis-move-amount').val();

                if (moveVal.length > 0) {
                    for (var i = 0; i < moveAdjValues.length; i++) {
                        if (moveVal == moveAdjValues[i]) {
                            moveAdjIndex = i;
                            break;
                        }
                    }
                }

                $('#minus-amount').click(function () {
                    moveAdjIndex--;
                    if (moveAdjIndex < 0) {
                        moveAdjIndex = 0;
                    }
                    $('#axis-move-amount').val(moveAdjValues[moveAdjIndex]);
                });

                $('#plus-amount').click(function () {
                    moveAdjIndex++;
                    if (moveAdjIndex > moveAdjValues.length - 1) {
                        moveAdjIndex = moveAdjValues.length - 1;
                    }
                    $('#axis-move-amount').val(moveAdjValues[moveAdjIndex]);
                });

                $("#set-value-button").show();
                $("#go-setting-btn").show();
                get_position_db_value();
            {% endif %}

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

{% block pagehead %}
    <h3 class="site-deck" style="text-align: center;">Train {{ module }} -- {{ current_dafe.display_name }}</h3>
{% endblock %}

{% block content %}
    <form name="trainModuleForm" id="trainModuleForm" method="post" style="margin-bottom: 0;">
        {% csrf_token %}
        <input type="hidden" name="next-step" id="next-step" value=""/>

        <div class="well well-small" style="margin-bottom: 0; margin-top: 0; padding: 2px;">
            <table style="width: 100%; height: 550px;">
                <tr>
                    <td style="border-right: thin solid #000000; vertical-align: top;">
                        <div id="step-select-group">
                            {% for step in step_list %}
                                <input type="radio" id="step-{{ step.tag }}" name="step-select" value="{{ step.tag }}"
                                        {% if current_step == step.tag %}checked{% endif %}>
                                <label class="train-step-select-btn" style="margin-top: 7px;"
                                        for="step-{{ step.tag }}">{{ step.tag }}</label>
                            {% endfor %}
                        </div>
                    </td>
                    <td style="border-right: thin solid #000000; vertical-align: top;">
                        <div id="task-select-group">
                            {% for task in task_list %}
                                <input type="radio" id="task-{{ task.id }}" name="task-select" value="{{ task.id }}"
                                        {% if current_task|add:"0" == task.id %}checked{% endif %}>
                                <label class="train-step-select-btn" style="margin-top: 7px;"
                                        for="task-{{ task.id }}">{{ task.step_tag }}</label>
                            {% endfor %}
                        </div>
                    </td>
                    <td style="width: 100%;">
                        <table align="center" style="width: 500px;">
                            <tr>
                                <td colspan="3">
                                    <div id="train-action-description" style="font-size: 14pt; font-weight: bold;">
                                        {% if current_description %}{{ current_description }}{% endif %}</div>
                                </td>
                            </tr>
                            <tr class="dosis-report-header">
                                <td colspan="3">
                                    <div id="axis-db-setting"></div>
                                </td>
                            </tr>
                            <tr style="height: 310px;">
                                <td>
                                    {% if 'Y' in axis_list or 'Z' in axis_list %}
                                        <div style="width: 300px; display: flex;">
                                            <table>
                                                <tr>
                                                    <td class="train-cross-td">&nbsp;</td>
                                                    <td class="train-cross-td">
                                                        <button id="z-up-btn" name="z-up-btn" type="button" class="btn train-btn">Z Up
                                                        </button>
                                                    </td>
                                                    <td class="train-cross-td">&nbsp;</td>
                                                </tr>
                                                <tr>
                                                    <td class="train-cross-td">
                                                        <button id="y-left-btn" name="y-left-btn" type="button" class="btn train-btn">Y Left
                                                        </button>
                                                    </td>
                                                    <td class="train-cross-td">
                                                        &nbsp;
                                                    </td>
                                                    <td class="train-cross-td">
                                                        <button id="y-right-btn" name="y-right-btn" type="button" class="btn train-btn">Y
                                                            Right
                                                        </button>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="train-cross-td">&nbsp;</td>
                                                    <td class="train-cross-td">
                                                        <button id="z-down-btn" name="z-down-btn" type="button" class="btn train-btn">Z
                                                            Down
                                                        </button>
                                                    </td>
                                                    <td class="train-cross-td">&nbsp;</td>
                                                </tr>
                                            </table>
                                        </div>
                                    {% endif %}
                                    {% if 'U' in axis_list or 'V' in axis_list %}
                                        <div style="width: 300px; display: flex;">
                                            <table>
                                                <tr>
                                                    <td class="train-cross-td">&nbsp;</td>
                                                    <td class="train-cross-td">
                                                        <button id="u-back-btn" name="u-back-btn" type="button" class="btn train-btn">U Back
                                                        </button>
                                                    </td>
                                                    <td class="train-cross-td">
                                                        &nbsp;
                                                    </td>
                                                    <td class="train-cross-td">&nbsp;</td>
                                                </tr>
                                                <tr>
                                                    <td class="train-cross-td">
                                                        <button id="v-left-btn" name="v-left-btn" type="button" class="btn train-btn">V
                                                            Left
                                                        </button>
                                                    </td>
                                                    <td class="train-cross-td">
                                                        &nbsp;
                                                    </td>
                                                    <td class="train-cross-td">
                                                        <button id="v-right-btn" name="v-right-btn" type="button" class="btn train-btn">V
                                                            Right
                                                        </button>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="train-cross-td">&nbsp;</td>
                                                    <td class="train-cross-td">
                                                        <button id="u-front-btn" name="u-front-btn" type="button" class="btn train-btn">U
                                                            Front
                                                        </button>
                                                    </td>
                                                    <td class="train-cross-td">&nbsp;</td>
                                                </tr>
                                            </table>
                                        </div>
                                    {% endif %}
                                    {% if 'X' in axis_list %}
                                        <div style="width: 300px; display: flex;">
                                        <table>
                                        <tr>
                                            <td class="train-cross-td">
                                                <button id="x-back-btn" name="x-back-btn" type="button" class="btn train-btn">X Back
                                                </button>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="train-cross-td">
                                                &nbsp;
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="train-cross-td">
                                                <button id="x-front-btn" name="x-front-btn" type="button" class="btn train-btn">X
                                                    Front
                                                </button>
                                            </td>
                                        </tr>
                                    </table>
                                        </div>
                                    {% endif %}

                                    {% if 'H' in axis_list %}
                                        <div style="width: 300px; display: inline-flex;">
                                            <table>
                                                <tr>
                                                    <td class="train-cross-td">
                                                        <button id="h-up-btn" name="h-up-btn" type="button" class="btn train-btn">H Up
                                                        </button>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="train-cross-td">
                                                        &nbsp;
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="train-cross-td">
                                                        <button id="h-down-btn" name="h-down-btn" type="button" class="btn train-btn">H Down
                                                        </button>
                                                    </td>
                                                </tr>
                                            </table>
                                        </div>
                                    {% endif %}
                                    {% if 'A' in axis_list or 'B' in axis_list or 'C' in axis_list %}
                                        <div style="width: 300px; display: flex;">
                                            <table>
                                                <tr>
                                                    <td class="train-cross-td">&nbsp;</td>
                                                    <td class="train-cross-td">
                                                        <button id="a-back-btn" name="a-back-btn" type="button" class="btn train-btn">A Back
                                                        </button>
                                                    </td>
                                                    <td class="train-cross-td">
                                                        &nbsp;
                                                    </td>
                                                    <td class="train-cross-td">
                                                        <button id="c-up-btn" name="c-up-btn" type="button" class="btn train-btn">C Up
                                                        </button>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="train-cross-td">
                                                        <button id="b-left-btn" name="b-left-btn" type="button" class="btn train-btn">B
                                                            Left
                                                        </button>
                                                    </td>
                                                    <td class="train-cross-td">
                                                        &nbsp;
                                                    </td>
                                                    <td class="train-cross-td">
                                                        <button id="b-right-btn" name="b-right-btn" type="button" class="btn train-btn">B
                                                            Right
                                                        </button>
                                                    </td>
                                                    <td class="train-cross-td">
                                                        &nbsp;
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="train-cross-td">&nbsp;</td>
                                                    <td class="train-cross-td">
                                                        <button id="a-front-btn" name="a-front-btn" type="button" class="btn train-btn">A
                                                            Front
                                                        </button>
                                                    </td>
                                                    <td class="train-cross-td">&nbsp;</td>
                                                    <td class="train-cross-td">
                                                        <button id="c-down-btn" name="c-down-btn" type="button" class="btn train-btn">C Down
                                                        </button>
                                                    </td>
                                                </tr>
                                            </table>
                                        </div>

                                    {% endif %}
                                    {% if 'E' in axis_list %}
                                        <div style="width: 300px; display: flex;">
                                            <table>
                                                <tr>
                                                    <td class="train-cross-td">
                                                        <button id="e-left-btn" name="e-left-btn" type="button" class="btn train-btn">E Left
                                                        </button>
                                                    </td>
                                                    <td class="train-cross-td">
                                                        &nbsp;
                                                    </td>
                                                    <td class="train-cross-td">
                                                        <button id="e-right-btn" name="e-right-btn" type="button" class="btn train-btn">E Right
                                                        </button>
                                                    </td>
                                                </tr>
                                            </table>
                                        </div>
                                    {% endif %}
                                    {% if 'F' in axis_list %}
                                        <div style="width: 120px; display: flex;">
                                            <table>
                                                <tr>
                                                    <td class="train-cross-td">
                                                        <button id="f-up-btn" name="f-up-btn" type="button" class="btn train-btn">F Up
                                                        </button>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="train-cross-td">
                                                        &nbsp;
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="train-cross-td">
                                                        <button id="f-down-btn" name="f-down-btn" type="button" class="btn train-btn">F Down
                                                        </button>
                                                    </td>
                                                </tr>
                                            </table>
                                        </div>
                                    {% endif %}
                                    {% if 'G' in axis_list %}
                                        <div style="width: 120px; display: flex;">
                                            <table>
                                                <tr>
                                                    <td class="train-cross-td">
                                                        <button id="g-back-btn" name="g-back-btn" type="button" class="btn train-btn">G Back
                                                        </button>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="train-cross-td">
                                                        &nbsp;
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="train-cross-td">
                                                        <button id="g-front-btn" name="g-front-btn" type="button" class="btn train-btn">G Front
                                                        </button>
                                                    </td>
                                                </tr>
                                            </table>
                                        </div>
                                    {% endif %}
                                </td>
                            </tr>
                            <tr style="height: 75px;">
                                <td colspan="3">&nbsp;</td>
                            </tr>
                            <tr>
                                <td colspan="3">
                                    {% if show_left_right or show_up_down or show_front_back %}
                                        <div id="axis-current-pos" style="display: inline-block;">Current Axis Position:
                                            ----
                                        </div>
                                        &nbsp;&nbsp;&nbsp;&nbsp;
                                        <button type="button" id="update-position-button" name="update-position-button"
                                                class="btn diag-move-adjust-button"
                                                style="width: 100px; display: inline-block;">
                                            Update
                                        </button>
                                    {% endif %}
                                </td>
                            </tr>
                        </table>
                    </td>
                    <td style="text-align: right; vertical-align: bottom; border-left: thin solid #000000;">
                        <table style="height: 100%;">
                            <tr>
                                <td>
                                    <div style="height: 90px; text-align: center; vertical-align: top;">
                                        <button id="go-next-step-btn" name="go-next-step-btn" type="button"
                                                class="btn train-axis-action-btn">
                                            Next >>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div id="bsf-pump-btn-div" style="display: none; height: 90px; text-align: center;">
                                        <button id="bsf-pump-btn" name="bsf-pump-btn" type="button"
                                                class="btn train-axis-action-btn"
                                                style="background: darkgray none;"
                                                value="off">
                                            BSF Pump
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div id="eoat-light-btn-div" style="display: none; height: 90px; text-align: center;">
                                        <button id="eoat-light-btn" name="eoat-light-btn" type="button"
                                                class="btn train-axis-action-btn"
                                                style="background: darkgray none;"
                                                value="off">
                                            Lights
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div id="flipper-pump-btn-div" style="display: none; height: 90px; text-align: center;">
                                        <button id="flipper-pump-btn" name="flipper-pump-btn" type="button"
                                                class="btn train-axis-action-btn"
                                                style="background: darkgray none;"
                                                value="off">
                                            Flipper Pump
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div id="trolley-pump-btn-div" style="display: none; height: 90px; text-align: center;">
                                        <button id="trolley-pump-btn" name="trolley-pump-btn" type="button"
                                                class="btn train-axis-action-btn"
                                                style="background: darkgray none;"
                                                value="off">
                                            Trolley Pump
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    {% if show_left_right or show_up_down or show_front_back %}
                                        <div style="height: 90px; text-align: center;">
                                            <button id="go-setting-btn" name="go-setting-btn" type="button"
                                                    class="btn train-axis-action-btn">
                                                Go To Setting
                                            </button>
                                        </div>
                                    {% else %}
                                        <div style="height: 90px; text-align: center;">&nbsp;</div>
                                    {% endif %}
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div style="width: 180px;">
                                        {% if show_left_right or show_up_down or show_front_back %}
                                            Move Amt: <input id="axis-move-amount" name="axis-move-amount" type="text"
                                                style="width: 40px;"
                                                value="0.05" class="diag-short-input">in.&nbsp;&nbsp;&nbsp;
                                            <button id="minus-amount" name="minus-amount" type="button" class="btn train-btn">
                                                <img class="img-rounded" src="{{ STATIC_URL }}img/cc_remove.png">
                                            </button>
                                            &nbsp;&nbsp;&nbsp;
                                            <button id="plus-amount" name="plus-amount" type="button" class="btn train-btn">
                                                <img class="img-rounded" src="{{ STATIC_URL }}img/cc_add.png">
                                            </button>
                                        {% else %}
                                            <div style="height: 90px; text-align: center;">&nbsp;</div>
                                        {% endif %}
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
            <table style="height: 60px; vertical-align: bottom; width: 100%;">
                <tr style="border-top: thin solid #000000;">
                    <td>
                        <button type="button" id="exit-button" name="exit-button" class="btn diag-move-adjust-button">
                            Exit
                        </button>
                    </td>
                    <td>&nbsp;</td>
                    <td>
                        <button type="button" id="train-axis-stop" name="train-axis-stop"
                                class="btn diag-move-adjust-button"
                                style="margin-left: 50px;background: #c02025 none;color: white; font-weight: bold; font-size: 16pt; width: 200px;">
                            STOP
                        </button>
                    </td>
                    <td style="width: 350px;">
                        <button type="button" id="set-value-button" name="set-value-button"
                                class="btn diag-move-adjust-button" style="width: 100px; display: none;">
                            Save Value
                        </button>
                    </td>
                    <td>&nbsp;</td>
                </tr>
            </table>
        </div>
    </form>
{% endblock %}