{% extends 'otree/WaitPage.html' %}
{% load otree %}
{% block title %}{{ title_text }}{% endblock %}
{% block content %}
    {{ body_text }}
    <div class="alert">
        <h4>Please move your mouse or click any button to remain active!</h4>
    </div>
    <div class="alert alert-warning">
        <h5>Your current status: <span class="status">active</span></h5>
    </div>
    <div class="progress" style="height: 50px;">
        <div class="progress-bar bg-warning progress-bar-animated to_passive"
             aria-valuemax="{{ C.SECONDS_TO_PASSIVE }}" role="progressbar">

            <h5 class="mx-3  status-wrapper justify-content-left  d-flex align-items-center">Seconds to change of status:&nbsp <span
                    class="timer"></span>
            </h5>
        </div>
    </div>

<script>
$(function () {
    $status_span = $('span.status');
    $timer_span = $('span.timer');

    $timer_span.html(C.SECONDS_TO_PASSIVE);

    var idleTime = 0,
        active = true;

    function send_status(status) {
        if (status !== active) {
            var status_string = status === true ? 'active' : 'passive';
            $status_span.html(status_string);
            active = status;
            var msg = {
                'status': status,
            };
            if (wp_socket.readyState === WebSocket.OPEN) {
                wp_socket.send(JSON.stringify(msg));
            }
            ;

        }
    };

    function restoreActiveStatus() {
        idleTime = 0;
        $('.to_passive').css('width', '100%').attr('aria-valuenow', 100);
        var time_left = C.SECONDS_TO_PASSIVE - idleTime;
        var time_show = time_left >= 0 ? time_left : 0;
        $timer_span.html(time_show);
        send_status(true);
    }

    //Increment the idle time counter every second.
    var idleInterval = setInterval(timerIncrement, 1000); // 1 second

    //Zero the idle timer on mouse movement.
    $(this).on('keypress', restoreActiveStatus)
    $(this).on('mousemove', restoreActiveStatus)
    // $(this).keypress(restoreActiveStatus(e));


    function timerIncrement() {
        idleTime = idleTime + 1;
        var time_left = seconds_to_passive - idleTime;
        $('.to_passive').css('width', time_left / C.SECONDS_TO_PASSIVE * 100 + '%').attr('aria-valuenow', time_left);
        var time_show = time_left >= 0 ? time_left : 0;
        $timer_span.html(time_show);
        if (idleTime > seconds_to_passive) {
            send_status(false);
            window.location.reload();
        }
    }
});
</script>
{% endblock %}
{% block styles %}
    <style>
        .status-wrapper {
            float: left;
            white-space: nowrap;
        }
    </style>
{% endblock %}