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


{% block header-extras %}
    <script>

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

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

        function display_uv_buttons(show) {
            if (show == true) {
                $("#uv-train-move-buttons").show();
                $("#u-curr-pos").show();
                $("#v-curr-pos").show();
                $("#save-u-btn").show();
                $("#save-v-btn").show();
            } else {
                $("#uv-train-move-buttons").hide();
                $("#u-curr-pos").hide();
                $("#v-curr-pos").hide();
                $("#save-u-btn").hide();
                $("#save-v-btn").hide();
            }
        }

        function clear_position(axis) {
            if (axis == 'U') {
                $("#u-curr-pos").html('----');
            }
            else if (axis == 'V') {
                $("#v-curr-pos").html('----');
            }
            else if (axis == 'X') {
                $("#x-curr-pos").html('----');
            }
            else if (axis == 'Y') {
                $("#y-curr-pos").html('----');
            }
            else if (axis == 'Z') {
                $("#z-curr-pos").html('----');
            }
            else if (axis == 'ALL') {
                $("#u-curr-pos").html('----');
                $("#v-curr-pos").html('----');
                $("#x-curr-pos").html('----');
                $("#y-curr-pos").html('----');
                $("#z-curr-pos").html('----');
                $('#camera-image').attr("src", "");
                $('#barcode-value-disp').html("Barcode:");
            }
        }

        function update_canister_data() {
            $.post("{% url 'L60Train:get-canister-data' %}", {
                row: $('input[type=radio][name=row-select]:checked').val(),
                canister: $('input[type=radio][name=canister-select]:checked').val(),
                csrfmiddlewaretoken: '{{csrf_token}}'
            }, function (data) {
                $("#canister-row-data").html(data);
            });
        }
        var doStreamUpdate = false;

        function get_stream_image() {
            if (doStreamUpdate) {
                $.ajax({
                    url: "/hmi/streamimage/",
                    type: "POST",
                    data: {
                        csrfmiddlewaretoken: '{{csrf_token}}',
                        rotate: 'Y'
                    },
                    success: function (data, status, jqXHR) {
                        $('#camera-image').attr("src", data);
                        setTimeout('get_stream_image()', 500);
                    }
                });
            } else {
                $.ajax({
                    url: "{% url 'L60Train:train-command' %}",
                    type: "POST",
                    data: {
                        csrfmiddlewaretoken: '{{csrf_token}}',
                        command: 'stream-stop',
                        data: 'Y'
                    }
                });
            }
        }

        function start_camera_stream() {
            $.ajax({
                url: "{% url 'L60Train:train-command' %}",
                type: "POST",
                data: {
                    csrfmiddlewaretoken: '{{csrf_token}}',
                    command: 'stream-show',
                    data: 'Y'
                },
                success: function (data, status, jqXHR) {
                    doStreamUpdate = true;
                    get_stream_image();
                }
            });
        }

        function stop_camera_stream() {
            doStreamUpdate = false;
            $('#stream-show').val("off");
            $('#stream-show').css('background-color', 'darkgray');
            $('#camera-image').attr("src", "");
        }

        $(function () {

            $("#confirm-dialog").dialog({
                autoOpen: false,
                closeOnEscape: false,
                model: true,
                draggable: false,
                buttons: [
                    {
                        text: "Yes",
                        "class": 'train-dialog-button',
                        click: function () {
                            $.post("{% url 'L60Train:normalize-row-data' %}", {
                                row: $('input[type=radio][name=row-select]:checked').val(),
                                canister: $('input[type=radio][name=canister-select]:checked').val(),
                                csrfmiddlewaretoken: '{{csrf_token}}'
                            }, function (data) {
                                alert("Canister Row Data Normalized.");
                                update_canister_data();
                            });
                            $(this).dialog("close");
                        }
                    },
                    {
                        text: "No",
                        "class": 'train-dialog-button',
                        click: function () {
                            $(this).dialog("close");
                        }
                    }
                ]
            });
            $("#exit-button").click(function () {
                window.location.href = "{% url 'L60Train:train-menu' %}";
            });

            $("#row-select-group").buttonset();
            $("#canister-select-group").buttonset();

            $('input[type=radio][name=row-select]').click(function () {
                update_canister_data();
            });

            $('input[type=radio][name=canister-select]').click(function () {
                update_canister_data();
            });

            {% if current_row and current_canister %}
                update_canister_data();
            {% endif %}

            $("#barcode-capture").click(function () {
                stop_camera_stream();
                $('#camera-image').attr("src", "");
                $("#eoat-lights").val("on");
                $("#eoat-lights").css('background-color', 'lightyellow');
                $.ajax({
                    url: "/hmi/barcodeimage/",
                    type: "POST",
                    data: {
                        csrfmiddlewaretoken: '{{csrf_token}}',
                        rotate: 'Y'
                    },
                    success: function (data, status, jqXHR) {
                        //$('#camera-image').attr("src", data);
                        $('#camera-image-div').html(data);
                        $('#barcode-value-disp').html("Barcode: " + $('#barcode-value').val());
                        let height_pixels = Math.round($(window).height() * .7);
                        $('#camera-image').css('max-height', height_pixels + 'px');
                    }
                });
            });

            $("#position-capture").click(function () {
                stop_camera_stream();
                $('#camera-image').attr("src", "");
                $("#eoat-lights").val("on");
                $("#eoat-lights").css('background-color', 'lightyellow');
                $.ajax({
                    url: "/hmi/positionimage/",
                    type: "POST",
                    data: {
                        csrfmiddlewaretoken: '{{csrf_token}}',
                        rotate: 'Y'
                    },
                    success: function (data, status, jqXHR) {
                        $('#camera-image').attr("src", data);
                        $('#camera-image').css('max-height', '');
                    }
                });
            });

            $("#eoat-lights").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}}'
                });
            });

            $("#stream-show").click(function () {
                if ($(this).val() == "off") {
                    $('#camera-image').attr("src", "");
                    $(this).val("on");
                    $(this).css('background-color', 'lightgreen');
                    $("#eoat-lights").val("on");
                    $("#eoat-lights").css('background-color', 'lightyellow');
                    $.post("{% url 'L60Train:train-command' %}", {
                        command: 'eoat-lights',
                        data: "on",
                        csrfmiddlewaretoken: '{{csrf_token}}'
                    });
                    let height_pixels = Math.round($(window).height() * .7);
                    $('#camera-image').css('max-height', height_pixels + 'px');
                    start_camera_stream();
                } else {
                    stop_camera_stream();
                }
            });

            $("#eoat-go-position").click(function () {
                $('#camera-image').attr("src", "");
                var newrow = $('input[type=radio][name=row-select]:checked').val();
                var newcan = $('input[type=radio][name=canister-select]:checked').val();

                $.post("{% url 'L60Train:train-position' %}", {
                    command: 'eoat-go-position',
                    row: newrow,
                    canister: newcan,
                    csrfmiddlewaretoken: '{{csrf_token}}'
                });
                $("#train-canisters-set-buttons").show();
                clear_position('ALL');

                if (newrow == "{{ primary_row }}" && newcan == "{{ primary_canister }}") {
                    display_uv_buttons(true);
                } else {
                    display_uv_buttons(false);
                }
            });

            $("#prev-position").click(function () {
                $('#camera-image').attr("src", "");
                var newrow = $('input[type=radio][name=row-select]:checked').val();
                var curCan = parseInt($('input[type=radio][name=canister-select]:checked').val());
                $("#can-" + curCan.toString()).prop('checked', false);
                curCan--;
                if (curCan <= 0) {
                    curCan = 1;
                }

                $.post("{% url 'L60Train:train-position' %}", {
                    command: 'prev-position',
                    row: newrow,
                    canister: curCan.toString(),
                    csrfmiddlewaretoken: '{{csrf_token}}'
                });
                $("#can-" + curCan.toString()).click();
                update_canister_data();
                $("#train-canisters-set-buttons").show();
                clear_position('ALL');

                if (newrow == "{{ primary_row }}" && curCan.toString() == "{{ primary_canister }}") {
                    display_uv_buttons(true);
                } else {
                    display_uv_buttons(false);
                }
            });

            $("#next-position").click(function () {
                $('#camera-image').attr("src", "");
                var newrow = $('input[type=radio][name=row-select]:checked').val();
                var curCan = parseInt($('input[type=radio][name=canister-select]:checked').val());
                $("#can-" + curCan.toString()).prop('checked', false);

                curCan++;
                if (curCan >= 12) {
                    curCan = 12;
                }

                $.post("{% url 'L60Train:train-position' %}", {
                    command: 'next-position',
                    row: newrow,
                    canister: curCan.toString(),
                    csrfmiddlewaretoken: '{{csrf_token}}'
                });
                $("#can-" + curCan.toString()).click();
                update_canister_data();
                $("#train-canisters-set-buttons").show();
                clear_position('ALL');

                if (newrow == "{{ primary_row }}" && curCan.toString() == "{{ primary_canister }}") {
                    display_uv_buttons(true);
                } else {
                    display_uv_buttons(false);
                }
            });

            var moveAdjValues = ["0.01", "0.05", "0.1", "0.5", "1", "2", "3", "4", "5"];
            var moveAdjIndex = 1;
            var moveVal = $('#backplane-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;
                }
                $('#backplane-move-amount').val(moveAdjValues[moveAdjIndex]);
            });

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

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

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

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

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

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

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

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

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

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

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

            $("#x-engage-btn").click(function () {
                $.post("{% url 'L60Train:train-position' %}", {
                    command: 'x-engage',
                    row: $('input[type=radio][name=row-select]:checked').val(),
                    canister: $('input[type=radio][name=canister-select]:checked').val(),
                    csrfmiddlewaretoken: '{{csrf_token}}'
                });
                clear_position('X');
            });

            $("#init-teach-btn").click(function () {
                $.post("{% url 'L60Train:train-position' %}", {
                    command: 'init-teach',
                    row: $('input[type=radio][name=row-select]:checked').val(),
                    canister: $('input[type=radio][name=canister-select]:checked').val(),
                    csrfmiddlewaretoken: '{{csrf_token}}'
                });
                clear_position('U');
                clear_position('V');
            });

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

            $("#x-disengage-btn").click(function () {
                send_train_command('x-disengage');
                clear_position('X');
            });

            $("#safe-travel-btn").click(function () {
                send_train_command('safe-travel');
                clear_position('ALL');
            });

            $("#index-btn").click(function () {
                send_train_command('index-blister');
                clear_position('U');
                clear_position('V');
            });


            $("#save-u-btn").click(function () {
                $.post("{% url 'L60Train:train-set-axis' %}", {
                    axis: 'U',
                    row: $('input[type=radio][name=row-select]:checked').val(),
                    canister: $('input[type=radio][name=canister-select]:checked').val(),
                    csrfmiddlewaretoken: '{{csrf_token}}'
                }, function (data) {
                    $("#u-curr-pos").html('<b>U: </b>' + data);
                    alert("U Axis Home Offset Saved.");
                    update_canister_data();
                });
            });

            $("#save-v-btn").click(function () {
                $.post("{% url 'L60Train:train-set-axis' %}", {
                    axis: 'V',
                    row: $('input[type=radio][name=row-select]:checked').val(),
                    canister: $('input[type=radio][name=canister-select]:checked').val(),
                    csrfmiddlewaretoken: '{{csrf_token}}'
                }, function (data) {
                    $("#v-curr-pos").html('<b>V: </b>' + data);
                    alert("V Axis Home Offset Saved.");
                    update_canister_data();
                });
            });

            $("#save-x-btn").click(function () {
                $.post("{% url 'L60Train:train-set-axis' %}", {
                    axis: 'X',
                    row: $('input[type=radio][name=row-select]:checked').val(),
                    canister: $('input[type=radio][name=canister-select]:checked').val(),
                    csrfmiddlewaretoken: '{{csrf_token}}'
                }, function (data) {
                    $("#x-curr-pos").html('<b>X: </b>' + data);
                    alert("X Axis Position Saved.");
                    update_canister_data();
                });
            });

            $("#save-y-btn").click(function () {
                $.post("{% url 'L60Train:train-set-axis' %}", {
                    axis: 'Y',
                    row: $('input[type=radio][name=row-select]:checked').val(),
                    canister: $('input[type=radio][name=canister-select]:checked').val(),
                    csrfmiddlewaretoken: '{{csrf_token}}'
                }, function (data) {
                    $("#y-curr-pos").html('<b>Y: </b>' + data);
                    alert("Y Axis Position Saved.");
                    update_canister_data();
                });
            });

            $("#save-z-btn").click(function () {
                $.post("{% url 'L60Train:train-set-axis' %}", {
                    axis: 'Z',
                    row: $('input[type=radio][name=row-select]:checked').val(),
                    canister: $('input[type=radio][name=canister-select]:checked').val(),
                    csrfmiddlewaretoken: '{{csrf_token}}'
                }, function (data) {
                    $("#z-curr-pos").html('<b>Z: </b>' + data);
                    alert("Z Axis Position Saved.");
                    update_canister_data();
                });
            });

            $("#recalc-positions").click(function () {
                $.post("{% url 'L60Train:train-get-axis-position' %}", {
                    axis: 'U',
                    csrfmiddlewaretoken: '{{csrf_token}}'
                }, function (data) {
                    $("#u-curr-pos").html('<b>U: </b>' + data);
                });
                $.post("{% url 'L60Train:train-get-axis-position' %}", {
                    axis: 'V',
                    csrfmiddlewaretoken: '{{csrf_token}}'
                }, function (data) {
                    $("#v-curr-pos").html('<b>V: </b>' + data);
                });
                $.post("{% url 'L60Train:train-get-axis-position' %}", {
                    axis: 'X',
                    csrfmiddlewaretoken: '{{csrf_token}}'
                }, function (data) {
                    $("#x-curr-pos").html('<b>X: </b>' + data);
                });
                $.post("{% url 'L60Train:train-get-axis-position' %}", {
                    axis: 'Y',
                    csrfmiddlewaretoken: '{{csrf_token}}'
                }, function (data) {
                    $("#y-curr-pos").html('<b>Y: </b>' + data);
                });
                $.post("{% url 'L60Train:train-get-axis-position' %}", {
                    axis: 'Z',
                    csrfmiddlewaretoken: '{{csrf_token}}'
                }, function (data) {
                    $("#z-curr-pos").html('<b>Z: </b>' + data);
                });
            });

            $("#normalize-row-data").click(function () {
                $("#confirm-dialog").dialog("open");
            });

            display_uv_buttons(false);
        });
    </script>
{% endblock %}

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

{% block content %}
    <form name="trainCanistersForm" id="trainCanistersForm" method="post" style="margin-bottom: 0;">
        {% csrf_token %}
        <div class="well well-small" style="margin-bottom: 0; margin-top: 0; padding: 2px;">
            <table style="width: 100%;">
                <tr style="height: 50px;">
                    <td colspan="3" style="text-align: center;">
                        <table style="width: 100%;">
                            <tr>
                                <td>
                                    <div id="canister-row-data" style="height: 80px;"></div>
                                </td>
                                <td style="text-align: right; width: 100px; padding-right: 30px;">
                                    <button id="normalize-row-data" name="normalize-row-data" class="btn train-btn" type="button">
                                        Normalize Data
                                    </button>
                                </td>
                            </tr>
                        </table>

                    </td>
                    <td rowspan="8" style="width: 380px; border-left: thin solid #000000; vertical-align: top;">
                        <table>
                            <tr>
                                <td>
                                    <button id="eoat-lights" name="eoat-lights" class="btn train-camera-btn" type="button"
                                            style="background: darkgray none;" value="off">Lights
                                    </button>
                                    &nbsp;&nbsp;
                                    <button id="barcode-capture" type="button" name="barcode-capture"
                                            class="btn train-camera-btn">Barcode
                                    </button>
                                    &nbsp;&nbsp;
                                    <button id="position-capture" type="button" name="position-capture"
                                            class="btn train-camera-btn">Position
                                    </button>
                                    &nbsp;&nbsp;
                                    <button id="stream-show" type="button" name="stream-show"
                                            class="btn train-camera-btn" style="background: darkgray none;"
                                            value="off">Stream
                                    </button>
                                </td>
                            </tr>
                            <tr>
                                <td id="barcode-value-disp" align="left" colspan="3">
                                    Barcode:
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <hr class="train-hr"/>
                                </td>
                            </tr>
                            <tr style="height: 470px;">
                                <td>
                                    <div id="camera-image-div" style="text-align: center;">
                                        <img src="" id="camera-image" name="camera-image"/><input type="hidden" name="barcode-value"
                                            id="barcode-value" value=""/>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr style="height: 10px;">
                    <td colspan="3">
                        <hr class="train-hr"/>
                    </td>
                </tr>
                <tr style="height: 60px;">
                    <td style="min-width: 260px;">
                        <div id="row-select-group" style="display: inline-block;">
                            <input type="radio" id="row-a" name="row-select" value="A"
                                    {% if current_row == 'A' %}checked{% endif %}><label class="train-loc-btn" for="row-a">A</label>
                            <input type="radio" id="row-b" name="row-select" value="B"
                                    {% if current_row == 'B' %}checked{% endif %}><label class="train-loc-btn" for="row-b">B</label>
                            <input type="radio" id="row-c" name="row-select" value="C"
                                    {% if current_row == 'C' %}checked{% endif %}><label class="train-loc-btn" for="row-c">C</label>
                            <input type="radio" id="row-d" name="row-select" value="D"
                                    {% if current_row == 'D' %}checked{% endif %}><label class="train-loc-btn" for="row-d">D</label>
                            <input type="radio" id="row-e" name="row-select" value="E"
                                    {% if current_row == 'E' %}checked{% endif %}><label class="train-loc-btn" for="row-e">E</label>
                        </div>
                    </td>
                    <td style="width: 330px; max-width: 350px;">
                        <div id="canister-select-group"
                                style="display: inline-block; padding-left: 10px; padding-right: 10px; border-left: thin solid #000000; border-right: thin solid #000000;">
                            <input type="radio" id="can-1" name="canister-select" value="1"
                                    {% if current_canister == '1' %}checked{% endif %}><label class="train-loc-btn"
                                for="can-1">1</label>
                            <input type="radio" id="can-2" name="canister-select" value="2"
                                    {% if current_canister == '2' %}checked{% endif %}><label class="train-loc-btn"
                                for="can-2">2</label>
                            <input type="radio" id="can-3" name="canister-select" value="3"
                                    {% if current_canister == '3' %}checked{% endif %}><label class="train-loc-btn"
                                for="can-3">3</label>
                            <input type="radio" id="can-4" name="canister-select" value="4"
                                    {% if current_canister == '4' %}checked{% endif %}><label class="train-loc-btn"
                                for="can-4">4</label>
                            <input type="radio" id="can-5" name="canister-select" value="5"
                                    {% if current_canister == '5' %}checked{% endif %}><label class="train-loc-btn"
                                for="can-5">5</label>
                            <input type="radio" id="can-6" name="canister-select" value="6"
                                    {% if current_canister == '6' %}checked{% endif %}><label class="train-loc-btn"
                                for="can-6">6</label>
                            <input type="radio" id="can-7" name="canister-select" value="7"
                                    {% if current_canister == '7' %}checked{% endif %}><label class="train-loc-btn"
                                for="can-7">7</label>
                            <input type="radio" id="can-8" name="canister-select" value="8"
                                    {% if current_canister == '8' %}checked{% endif %}><label class="train-loc-btn"
                                for="can-8">8</label>
                            <input type="radio" id="can-9" name="canister-select" value="9"
                                    {% if current_canister == '9' %}checked{% endif %}><label class="train-loc-btn"
                                for="can-9">9</label>
                            <input type="radio" id="can-10" name="canister-select" value="10"
                                    {% if current_canister == '10' %}checked{% endif %}><label class="train-loc-btn"
                                for="can-10">10</label>
                            <input type="radio" id="can-11" name="canister-select" value="11"
                                    {% if current_canister == '11' %}checked{% endif %}><label class="train-loc-btn"
                                for="can-11">11</label>
                            <input type="radio" id="can-12" name="canister-select" value="12"
                                    {% if current_canister == '12' %}checked{% endif %}><label class="train-loc-btn"
                                for="can-12">12</label>
                        </div>
                    </td>
                    <td style="min-width: 300px;">
                        <div style="display: inline-block;">
                            <button id="eoat-go-position" name="eoat-go-position" type="button" class="btn train-btn">Go To</button>
                            &nbsp;&nbsp;
                            <button id="prev-position" name="prev-position" type="button" class="btn train-btn">Prev</button>
                            &nbsp;&nbsp;
                            <button id="next-position" name="next-position" type="button" class="btn train-btn">Next</button>
                        </div>
                    </td>
                </tr>
                <tr style="height: 10px;">
                    <td colspan="3">
                        <hr class="train-hr"/>
                    </td>
                </tr>
                <tr style="height: 80px;">
                    <td style="vertical-align: top;" colspan="3">
                        <table>
                            <tr>
                                <td>
                                    <table align="center">
                                        <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>
                                </td>
                                <td style="vertical-align: top; padding-left: 10px; border-left: thin solid #000000; border-right: thin solid #000000;">
                                    <table align="center">
                                        <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>
                                </td>
                                <td style="width: 280px; vertical-align: top; padding-left: 10px; border-left: thin solid #000000; border-right: thin solid #000000;">
                                    <table align="center" id="uv-train-move-buttons">
                                        <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>
                                </td>
                                <td style="vertical-align: top; padding-left: 20px;">
                                    <table align="center">
                                        <tr>
                                            <td class="train-cross-td">
                                                <button id="x-engage-btn" name="x-engage-btn" type="button" class="btn train-btn">X
                                                    Engage
                                                </button>
                                            </td>
                                            <td class="train-cross-td"><button id="init-teach-btn" name="init-teach-btn" type="button"
                                                        class="btn train-btn">Init Teach
                                                </button></td>
                                        </tr>
                                        <tr>
                                            <td class="train-cross-td">
                                                <button id="x-disengage-btn" name="x-disengage-btn" type="button"
                                                        class="btn train-btn">X Retract
                                                </button>
                                            </td>
                                            <td class="train-cross-td">
                                                <button id="index-btn" name="index-btn" type="button" class="btn train-btn">Index
                                                </button>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="train-cross-td">
                                                <button id="safe-travel-btn" name="safe-travel-btn" type="button"
                                                        class="btn train-btn">Safe Travel
                                                </button>
                                            </td>
                                            <td class="train-cross-td">&nbsp;</td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr style="height: 10px;">
                    <td colspan="3">
                        <hr class="train-hr"/>
                    </td>
                </tr>
                <tr style="height: 80px;">
                    <td colspan="3" style="vertical-align: top;">
                        <table style="width: 98%;">
                            <tr>
                                <td>
                                    <div id="x-curr-pos">----</div>
                                </td>
                                <td>
                                    <div id="y-curr-pos">----</div>
                                </td>
                                <td>
                                    <div id="z-curr-pos">----</div>
                                </td>
                                <td>
                                    <div id="u-curr-pos">----</div>
                                </td>
                                <td>
                                    <div id="v-curr-pos">----</div>
                                </td>
                                <td rowspan="2" style="text-align: right;">
                                    Move Amt: <input id="backplane-move-amount" name="backplane-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>
                                </td>
                            </tr>
                            <tr id="train-canisters-set-buttons" style="display: none;">
                                <td>
                                    <button id="save-x-btn" name="save-x-btn" type="button" class="btn train-btn">Set X</button>
                                </td>
                                <td>
                                    <button id="save-y-btn" name="save-y-btn" type="button" class="btn train-btn">Set Y</button>
                                </td>
                                <td>
                                    <button id="save-z-btn" name="save-z-btn" type="button" class="btn train-btn">Set Z</button>
                                </td>
                                <td>
                                    <button id="save-u-btn" name="save-u-btn" type="button" class="btn train-btn">Set U</button>
                                </td>
                                <td>
                                    <button id="save-v-btn" name="save-v-btn" type="button" class="btn train-btn">Set V</button>
                                </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="recalc-positions" name="recalc-positions" class="btn diag-move-adjust-button"
                                style="width: 160px;">Update Positions
                        </button>
                    </td>
                    <td>
                        <button type="button" id="train-canister-stop" name="train-canister-stop"
                                class="btn diag-move-adjust-button"
                                style="margin-left: auto; margin-right: auto; background: #c02025 none; color: white; font-weight: bold; font-size: 16pt; width: 200px;">
                            STOP
                        </button>
                    </td>
                    <td>&nbsp;</td>
                </tr>
            </table>
        </div>
    </form>
    <div id="confirm-dialog" title="Confirm Action">
        <p id="confirm-action-name">
            Normalize Canister Data Requested
        </p>

        <p>
            Are you sure you want to do this?
        </p>
    </div>
{% endblock %}