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


{% block header-extras %}
    {{ block.super }}
    <script>
        function diagButtonUpdate() {
            if ($("#allStopped").val() == "Y") {
                $("#advanced-diag-button").removeAttr("disabled");
            } else {
                $("#advanced-diag-button").attr("disabled", "disabled");
            }
        }
        $(function () {
            diagButtonUpdate();

            $("#timezone-button").click(function () {
                window.location.href = "/hmi/timezone/"
            });

            $("#blister-select-button").click(function () {
               window.location.href = "/hmi/change_blister/"
            });

            $("#network-button").click(function () {
                window.location.href = "/hmi/network/"
            });

            $("#advanced-diag-button").click(function () {
                window.location.href = "/hmi/advdiag/"
            });

            $("#advanced-diag-button").click(function () {
                window.location.href = "/hmi/advdiag/"
            });


            var stoppedtimer;

            stoppedtimer = setInterval(function () {
                diagButtonUpdate()
            }, 1000);
            /*1 seconds*/

            $("#confirm-dialog").dialog({
                autoOpen: false,
                closeOnEscape: false,
                model: true,
                draggable: false,
                buttons: [
                    {
                        text: "Yes",
                        "class": 'dialog-button',
                        click: function () {
                            $("#settingsDisplayForm").submit();
                            $(this).dialog("close");
                        }
                    },
                    {
                        text: "No",
                        "class": 'dialog-button',
                        click: function () {
                            $(this).dialog("close");
                        }
                    }
                ]
            });

            $("#shutdown-computer-button").click(function () {
                $("#confirm-action-name").text("Shutdown Computer");
                $("#form_submit_button").val("shutdown-computer");
                $("#confirm-dialog").dialog("open");
            });
        });
    </script>
{% endblock %}

{% block content %}
    <div id="confirm-dialog" title="Confirm Action">
        <p id="confirm-action-name" name="confirm-action-name">
            Action Requested
        </p>

        <p>
            Are you sure?
        </p>
    </div>
    <form name="settingsDisplayForm" id="settingsDisplayForm" method="post">
        {% csrf_token %}
        <div class="grey-background">
            <table style="width: 100%;">
                <tr>
                    <td class="settings-top-cell">
                        <fieldset class="titled-border-fieldset-top-settings">
                            <legend class="titled-border-legend">
                                Internal Printer
                            </legend>
                            <table class="user-maintenance-table">
                                <tr style="width: 100%;">
                                    <td style="height: 20px;">Printer Status: {{ printer_status.status }}</td>
                                </tr>
                                <tr style="width: 100%;">
                                    <td style="height: 20px;">Firmware Version: {{ printer_status.firmware }}</td>
                                </tr>
                                <tr style="width: 100%;">
                                    <td colspan="2" style="height: 100px;">
                                        <button id="print-test-label-button" name="print-test-label-button" class="print-test-label-button">
                                            <img class="img-rounded" src="{{ STATIC_URL }}img/cc_fileprint.png"> Print Test Label
                                        </button>
                                    </td>
                                </tr>
                            </table>
                        </fieldset>
                    </td>
                </tr>
                <tr>
                    <td class="settings-bottom-cell">
                        <fieldset class="titled-border-fieldset-bottom-settings">
                            <legend class="titled-border-legend">
                                Miscellaneous
                            </legend>

                            <table class="user-maintenance-table">
                                <tr style="width: 100%;">
                                    <td style="height: 90px;">
                                        <button class="settings-button" id="blister-select-button" name="blister-select-button" type="button">
                                            <table class="settings-button-table">
                                                <tr>
                                                    <td class="settings-bottom-button-cell"><img class="img-rounded" src="{{ STATIC_URL }}img/cc_kivio.png">
                                                    </td>
                                                    <td class="settings-bottom-button-cell">Change
                                                        <br/>
                                                        Blister Card
                                                    </td>
                                                </tr>
                                            </table>
                                        </button>
                                    </td>
                                    <td style="height: 90px;">
                                        <button id="timezone-button" name="timezone-button" type="button" class="settings-button">
                                            <table class="settings-button-table">
                                                <tr>
                                                    <td class="settings-bottom-button-cell"><img class="img-rounded" src="{{ STATIC_URL }}img/cc_app_clock.png">
                                                    </td>
                                                    <td class="settings-bottom-button-cell">Set
                                                        <br/>
                                                        Timezone
                                                    </td>
                                                </tr>
                                            </table>
                                        </button>
                                    </td>
                                    <td style="height: 90px;">
                                        <button id="calibrate-touchscreen-button" name="calibrate-touchscreen-button" class="settings-button">
                                            <table class="settings-button-table">
                                                <tr>
                                                    <td class="settings-bottom-button-cell"><img class="img-rounded" src="{{ STATIC_URL }}img/cc_display.png">
                                                    </td>
                                                    <td class="settings-bottom-button-cell">Calibrate Touchscreen</td>
                                                </tr>
                                            </table>
                                        </button>
                                    </td>
                                </tr>
                                <tr style="width: 100%;">
                                    <td style="height: 90px;">
                                        <button id="network-button" name="network-button" type="button" class="settings-button">
                                            <table class="settings-button-table">
                                                <tr>
                                                    <td class="settings-bottom-button-cell"><img class="img-rounded" src="{{ STATIC_URL }}img/cc_network.png">
                                                    </td>
                                                    <td class="settings-bottom-button-cell">Configure Network</td>
                                                </tr>
                                            </table>
                                        </button>
                                    </td>
                                    <td style="height: 90px;">
                                        <button class="settings-button" type="button" id="advanced-diag-button" name="advanced-diag-button">
                                            <table class="settings-button-table">
                                                <tr>
                                                    <td class="settings-bottom-button-cell"><img class="img-rounded" src="{{ STATIC_URL }}img/cc_adv_train.png">
                                                    </td>
                                                    <td class="settings-bottom-button-cell">Advanced Diagnostics</td>
                                                </tr>
                                            </table>
                                        </button>
                                    </td>
                                    <td style="height: 90px;">
                                        <button class="settings-button" id="shutdown-computer-button" name="shutdown-computer-button" type="button">
                                            <table class="settings-button-table">
                                                <tr>
                                                    <td class="settings-bottom-button-cell"><img class="img-rounded" src="{{ STATIC_URL }}img/cc_shutdown.png">
                                                    </td>
                                                    <td class="settings-bottom-button-cell">Shutdown Computer</td>
                                                </tr>
                                            </table>
                                        </button>
                                    </td>
                                </tr>
                            </table>
                        </fieldset>
                    </td>
                </tr>
                <tr>
                    <td>
                        <p>
                            System Version: Unknown
                        </p></td>
                </tr>
            </table>
        </div>
    <input type="hidden" name="form_submit_button" id="form_submit_button" value=""/>
    </form>
{% endblock %}