{% extends "double_auction/Page.html" %}
{% load i18n %}
{% load staticfiles otree %}

{% block body_main %}
    <div class="otree-body container">
        <div class="page-header">
            <h2 class="otree-title">{% block title %}{% endblock %}</h2>
        </div>
        <div>
            {% if view.remaining_timeout_seconds != None %}
                {% include 'otree/includes/TimeLimit.html' with form_element_id="form" %}
            {% endif %}

            {% if form.errors %}
                <div class="otree-form-errors alert alert-danger">
                    {% blocktrans trimmed %}Please fix the errors in the form.{% endblocktrans %}
                    {{ form.non_field_errors }}
                </div>
            {% endif %}

            <div id="_otree-server-error" class="alert alert-danger"
                 style="display:none">
                {% blocktrans trimmed %}
                    An error occurred. Please check the logs or ask
                    the administrator for help.{% endblocktrans %}
            </div>

            <form action="" method="post" role="form" id="form" onkeypress="return event.keyCode != 13;">{% csrf_token %}
                <input type="hidden" value="{{ request.path }}"
                       name="origin_url"/>
                <div class="_otree-content">
                    {% block content %}
                        {% include "double_auction/double_auction_game.html" %}
                    {% endblock %}
                </div>
            </form>
        </div>
        <br/>
        {% if view.is_debug %}
            <br>
            {% include 'otree/includes/debug_info.html' %}
        {% endif %}
    </div>
{% endblock %}

{% block styles %}
<link href="{% static "double_auction/styles.css" %}" rel="stylesheet">
{% endblock %}

{% block scripts %}
<script>
    var player = {
        id: {{ player.id }},
        value: {{ player.last_offer|json }},
        maxValue: {{ maxValue }},
        minValue: {{ minValue }},
        match: {{ lock|json }},
        participants: {{ participants|json }},
        role: "{{ participant.vars.role }}"
    };
    var seconds_to_start = {{ seconds_to_start }};

    console.log(player)

    

    window.onload = function() {

        var ws_scheme = window.location.protocol == "https:" ? "wss" : "ws";

        var ws_url = ws_scheme + "://" + window.location.host + "/double-auction/{{ participant.code}}"
        var socket = new ReconnectingWebSocket(ws_url);

        // Handle any errors that occur.
        socket.onerror = function(error) {
            console.log('WebSocket Error: ' + error);
        };

        sendmessage = function(value, optionalPlayerId) {
            var msg = {
                id: {{player.id}},
                type: "{{participant.vars.role}}",
                value: value,
                optionalPlayerId: optionalPlayerId
            };
            if(socket.readyState === 1){
                socket.send(JSON.stringify(msg));
            }
        }
        // Show a connected message when the WebSocket is opened.
        socket.onopen = function(event) {
            console.log('connected to oTree');
        };


        // Handle messages sent by the server.
        socket.onmessage = function(event) {
            console.log(event.data);
            var obj = jQuery.parseJSON(event.data);

            if (document.readyState !== "loading") {
                updateDomFromWsObj(obj)
            }
            else {
                document.addEventListener("DOMContentLoaded", function() {
                    updateDomFromWsObj(obj)
                });
            }
            
        };


        // Show a disconnected message when the WebSocket is closed.
        socket.onclose = function(event) {
            console.log("disconnected from oTree");
        };


        clearbet = function() {
            var msg = {
                id: {{player.id}},
                type: "clear",
            };
            if(socket.readyState === 1){
                socket.send(JSON.stringify(msg));
            }
        }



    };
</script>
<script src="{% static 'otree/js/jquery.countdown.min.js' %}"></script>
<script src="{% static 'double_auction/app.js' %}" charset="utf-8"></script>
{% endblock %}