{% extends "otree/Session.html" %}

{% block internal_styles %}
    {{ super() }}
    <style>
        #monitor-table th {
            font-size: small;
            padding-left: 0.25rem;
            padding-right: 0.25rem;
        }
    </style>
{% endblock %}
{% block content %}
    {{ super() }}
    <table id="monitor-table"
           class="table table-bordered table-hover table-condensed">
        <thead>
        <tr>
            {% for header in headers %}
                <th>{{ header }}</th>
            {% endfor %}
            <th></th>
        </tr>
        </thead>
        <tbody></tbody>
    </table>

    <p><span id="num_participants_visited">0</span>/{{ session.num_participants }} participants started.</p>
    <p><small id="msg-refreshed" style="color: darkgreen"></small></p>

    {% if not session.use_browser_bots %}
        {% csrf_token %}
        <div style="display: flex; justify-content: space-between">
            <div style="display: flex; align-items: center">
                <button id="advance_users" class="btn btn-secondary" type="button"
                        title="Advance the user(s) by one page, by forcing a timeout on their current page."
                        onclick="advanceUsers()">
                    Advance slowest participants
                </button>
                <select name="advance_participants_mode"
                        onchange="changeAdvanceParticipantsMode(this.value)"
                        class="form-select"
                        style="display: none"
                        >
                    <option value="all" selected>participants in last place</option>
                    <option value="visited_only">participants in last place (who already started)</option>
                </select>
                {% if session.num_participants > ADVANCE_SLOWEST_BATCH_SIZE %}
                    &nbsp;<small>(max {{ ADVANCE_SLOWEST_BATCH_SIZE }} at a time)</small>
                {% endif %}
            </div>

            {% comment %}
            <button class="btn btn-secondary" type="button"
                    onclick="advanceSelectedUser()"
                    style="float: right"
            >
                Advance selected
            </button>
            {% endcomment %}
        </div>

    {% endif %}
    <br>

    <script>

        function changeAdvanceParticipantsMode(value) {
            localStorage.setItem('advance_participants_mode', value);
        }

        function loadAdvanceParticipantsSplitButton() {
            let mode = localStorage.getItem('advance_participants_mode');
            if (mode) {
                document.getElementsByName('advance_participants_mode')[0].value = mode;
            }
        }

        loadAdvanceParticipantsSplitButton();
    </script>

    <div id="refresh_server_error" class="alert alert-danger"
         style="display: none;">
        Failed to refresh data from the server.
    </div>

    <div id="auto_advance_server_error" class="alert alert-danger"
         style="display: none;">
        An error occurred and participants could not be advanced.
        See the server logs for details.
    </div>


{% endblock %}


{% block internal_scripts %}
    {{ super() }}
    <script>
        let recentlyActiveParticipants = {};
        var $table, $tbody;
        let visitedParticipants;
        var monitorSocket;
        var advanceUrl = '{% url 'AdvanceSession' session.code %}';
        var socketUrl = {{ socket_url|json }};
        let numParticipants = {{ session.num_participants|json }};
    </script>

    <script src="{% static 'otree/js/session_monitor.js' %}"></script>

    <script>
        $(document).ready(function () {
            visitedParticipants = [];
            $table = $('#monitor-table');
            $tbody = $table.find('tbody');
            initWebSocket(socketUrl, $tbody, visitedParticipants, $('#msg-refreshed'));

            $('[data-bs-toggle="popover"]').popover();

            initSortableHeaders();
        });

        setInterval(
            function () {
                $.ajax({
                    url: '{% url "SessionMonitorAskForPresenceIcons" session.code %}',
                    type: 'GET',
                    contentType: "application/json",
                });
            },
            // don't want to do it too often since it will clutter the logs
            15 * 1000);
    </script>
{% endblock %}