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


{% block header-extras %}
    <style>
        #hmi_iframe {
            position: fixed;
            bottom: 0;
            right: 0;
            width: 800px;
            height: 600px;
            border: none; /* Remove border if needed */
        }
    </style>

    <script>
        $(function () {
            $("#train-canisters-button").click(function () {
                window.location.href = "{% url 'L60Train:train-canisters' %}";
            });

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

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

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

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

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

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

            $("#train-lsu-trolley-safe-travel-button").click(function() {
                window.location.href = "{% url 'L60Train:train-trolley-safe' %}";
            });

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

            $("#train-lsu-trolley-output-bin-button").click(function() {
                window.location.href = "{% url 'L60Train:train-lsu-output-bin' %}";
            });

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

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

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

            $("#train-lsu-trolley-lids-button").click(function() {
                window.location.href = "{% url 'L60Train:train-trolley-lid-pickup' %}";
            });

            $("#train-lsu-trolley-label-brush-button").click(function() {
                window.location.href = "{% url 'L60Train:train-trolley-label-brush' %}";
            });

            $("#test-system-steps-button").click(function() {
                window.location.href = "{% url 'L60Train:test-all-steps' %}";
            });

            $("#test-eoat-bsf-handoff-button").click(function() {
                window.location.href = "{% url 'L60Train:test-eoat-bsf-handoff' %}";
            });

            $("#test-eoat-lsu-handoff-button").click(function() {
                window.location.href = "{% url 'L60Train:test-eoat-lsu-handoff' %}";
            });

            $("#test-lsu-steps-button").click(function() {
                window.location.href = "{% url 'L60Train:test-lsu-steps' %}";
            });

            $("#adv_diag").click(function() {
                if ($('#hmi_iframe').length === 0){
                    const iframe = $("<iframe></iframe>");
                    iframe.attr({
                        "id": "hmi_iframe",
                        "width": "800",
                        "height": "600",
                        "src": "/hmi/advdiag/"
                    });
                    $("body").append(iframe);
                    $('#adv_diag').text('Close HMI');
                } else {
                    $('#hmi_iframe').remove();
                    $('#adv_diag').text('Advanced Diagnostics');
                }
            });
        });
    </script>
{% endblock %}

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

{% block content %}
    <form name="trainMenuForm" id="trainMenuForm" method="post" style="margin-bottom: 0;">
        {% csrf_token %}
        <div class="well well-small" style="margin-bottom: 0; margin-top: 0;">
            <table>
                <tr>
                    <td class="train-menu-td">
                        <button type="button" id="train-canisters-button" name="train-canisters-button"
                                class="btn diag-action-button">
                            Train Canisters
                        </button>
                    </td>
                    <td class="train-menu-td">
                        <button type="button" id="train-axis-button" name="train-axis-button"
                                class="btn diag-action-button">
                            Train Axis
                        </button>
                    </td>
                    <td class="train-menu-td">
                        <button type="button" id="train-teach-point-button" name="train-teach-point-button"
                                class="btn diag-action-button">
                            Train By Teach Point
                        </button>
                    </td>
                    <td class="train-menu-td"></td>
                    <td class="train-menu-td"></td>
                    <td class="train-menu-td"></td>
                    <td class="train-menu-td">
                        <button type="button" id="adv_diag" class="btn diag-action-button">
                            Advanced Diagnostics
                        </button>
                    </td>
                </tr>
                <tr>
                    <td class="train-menu-td">
                        <button type="button" id="train-bsf-button" name="train-bsf-button"
                                class="btn diag-action-button">
                            Train Blister Feeder
                        </button>
                    </td>
                    <td class="train-menu-td">
                        <button type="button" id="train-eoat-safe-button" name="train-eoat-safe-button"
                                class="btn diag-action-button">
                            Train EOAT Safe Travel
                        </button>
                    </td>
                    <td class="train-menu-td">
                        <button type="button" id="train-eoat-bsf-handoff-button" name="train-eoat-bsf-handoff-button"
                                class="btn diag-action-button">
                            Train BSF-EOAT Handoff
                        </button>
                    </td>
                    <td class="train-menu-td">
                        <button type="button" id="train-lsu-trolley-safe-travel-button" name="train-lsu-trolley-safe-travel-button"
                                class="btn diag-action-button">
                            Train LSU Trolley Safe Travel
                        </button>
                    </td>
                    <td class="train-menu-td">
                        <button type="button" id="train-eoat-lsu-handoff-button" name="train-eoat-lsu-handoff-button"
                                class="btn diag-action-button">
                            Train EOAT-LSU Handoff
                        </button>
                    </td>
                </tr>
                <tr>
                    <td class="train-menu-td">
                        <button type="button" id="train-lsu-blister-pickup-button" name="train-lsu-blister-pickup-button"
                                class="btn diag-action-button">
                            Train LSU Trolley -> Pickup
                        </button>
                    </td>
                    <td class="train-menu-td">
                        <button type="button" id="train-lsu-trolley-output-bin-button" name="train-lsu-trolley-output-bin-button"
                                class="btn diag-action-button">
                            Train LSU Trolley -> Output Bin
                        </button>
                    </td>
                    <td class="train-menu-td">
                        <button type="button" id="train-sealer-flipper-button" name="train-sealer-flipper-button"
                                class="btn diag-action-button">
                            Train Sealer/Flipper
                        </button>
                    </td>
                    <td class="train-menu-td">
                        <button type="button" id="train-lsu-trolley-sealer-button" name="train-lsu-trolley-sealer-button"
                                class="btn diag-action-button">
                            Train LSU Trolley -> Sealer
                        </button>
                    </td>
                    <td class="train-menu-td">
                        <button type="button" id="train-lid-slider-button" name="train-lid-slider-button"
                                class="btn diag-action-button">
                            Train Lid Slider
                        </button>
                    </td>
                    <td class="train-menu-td">
                        <button type="button" id="train-lsu-trolley-lids-button" name="train-lsu-trolley-lids-button"
                                class="btn diag-action-button">
                            Train LSU Trolley -> Lids
                        </button>
                    </td>
                    <td class="train-menu-td">
                        <button type="button" id="train-lsu-trolley-label-brush-button" name="train-lsu-trolley-label-brush-button"
                                class="btn diag-action-button">
                            Train LSU Trolley -> Label Brush
                        </button>
                    </td>
                </tr>
                <tr>
                    <td class="train-menu-td">
                        <button type="button" id="test-eoat-bsf-handoff-button" name="test-eoat-bsf-handoff-button"
                                class="btn diag-action-button">
                            Test BSF-EOAT Handoff
                        </button>
                    </td>
                    <td class="train-menu-td">
                        <button type="button" id="test-eoat-lsu-handoff-button" name="test-eoat-lsu-handoff-button"
                                class="btn diag-action-button">
                            Test EOAT-LSU Handoff
                        </button>
                    </td>
                    <td class="train-menu-td">
                        <button type="button" id="test-lsu-steps-button" name="test-lsu-steps-button"
                                class="btn diag-action-button">
                            Test LSU Process Steps
                        </button>
                    </td>
                </tr>
                <tr>
                    <td class="train-menu-td">
                        <button id="stop-button" name="stop-button" class="btn diag-action-button">
                            <img class="img-rounded" src="{{ STATIC_URL }}img/cc_stop.png"> Stop
                        </button>
                    </td>
                    <td colspan="5" style="text-align: center;" class="train-menu-td">
                        <button type="button" id="test-system-steps-button" name="test-system-steps-button"
                                class="btn diag-action-button">
                            Test All Steps
                        </button></td>
                    <td class="train-menu-td">
                        <button id="exit-button" name="exit-button" class="btn diag-action-button">
                            Exit
                        </button>
                    </td>
                </tr>
            </table>
        </div>
    </form>
{% endblock %}