{% extends "base.html" %}


{% block header-extras %}
    <style>
        .idle-status-container {
            display: block;
            height: 100%;
            overflow: hidden;
            margin: 0;
            padding: 0;
        }

        .white-text {
            color: white;
        }

    </style>
    <script>
        function idleStatus() {
            $.ajax({
                url: "/hmi/idlestatus/",
                type: "POST",
                data: {
                    csrfmiddlewaretoken: '{{csrf_token}}'
                },
                success: function (data, status, jqXHR) {
                    $('#idle-display').html(data);
                }
            });
        }

        var pageStateChanged = false;
        function idleRedirect() {
            var lockval = $("#lock_screen").val();
            if (lockval == "False" && !pageStateChanged) {
                pageStateChanged = true;
                $("*").css("cursor", "wait");
                {% if currentPage == 'canisters' %}
                    window.location = "/hmi/canister_page/";
                {% elif currentPage == 'status' %}
                    window.location = "/hmi/status_page/";
                {% elif currentPage == 'maintenance' %}
                    window.location = "/hmi/maintenance_page/";
                {% elif currentPage == 'settings' %}
                    window.location = "/hmi/settings_page/";
                {% else %}
                    window.location = "/hmi/canister_page/";
                {% endif %}
            }
        }

        $(document).ready(function () {
            $('body').css('display', 'none');
            if (window.screen.width !== 800 || window.screen.height !== 600){
                {% if is_system %}
                    location.href = "{% url 'site:dispense-order-queue' %}"
                {% else %}
                    location.href = "{% url 'L60:hmi2' %}"
                {% endif %}
            } else {
                $('body').css('display', 'block');
            }

            idleStatus();

            var materialtimer;

            materialtimer = setInterval(function () {
                idleStatus()
            }, 3000);
            /*3 seconds*/

            /*clearInterval(materialtimer);*/

            if (window.screen.width === 800 && window.screen.height === 600){
                $("*").css("cursor", "none");
            }
        });

        idleStatus();

        $(document).click(function (e) {
            if (!(e.target.nodeName == "BUTTON")) {
                idleRedirect();
            } else {
                if (e.target.id == "reboot-computer-button") {
                    $.post("{% url 'L60:idle-screen-reboot' %}", {
                        csrfmiddlewaretoken: '{{csrf_token}}'
                    });
                } else {
                    $.post("{% url 'L60:idle-screen-estop' %}", {
                        csrfmiddlewaretoken: '{{csrf_token}}'
                    });
                }
            }
        });

        $(document).on('mousemove keydown', function() {
            idleRedirect();
        });

    </script>
{% endblock %}

{% block body %}
    <div id="maintenance-overdue-bounce" style="display: none;" class="ball"></div>
    <table>
        <tr>
            <td style="width: 800px; height: 595px;">
                <div id="idle-display" class="idle-status-container">
                    {% include 'hmi-idle-status.html' %}
                </div>
            </td>
        </tr>
    </table>
{% endblock %}