{% extends "global/Page.html" %}
{% load staticfiles otree_tags %}

{% block title %}
    Auction
{% endblock %}

{% block content %}

    <!--<div class="instructions well well-lg">-->
        <!--<p>-->
            <!--You are competing with <b>{{ Constants.num_others }}</b> other participants for a prize of-->
            <!--<b>{{ Constants.prize }}</b>.-->
        <!--</p>-->
        <!--<p>A person who offers the highest price will get the prize. </p>-->
        <!--<p>-->
            <!--You have <b>{{ Constants.endowment }}</b> to spend in this auction.-->
        <!--</p>-->

        <!--<p>-->
            <!--Each click on the button will raise the price that you will pay by 10 points.-->
        <!--</p>-->
        <!--<p>-->
            <!--All other participants have <b>{{ Constants.extra_time }}</b> seconds to increase the price.</b>-->
        <!--</p>-->
    <!--</div>-->

    <div>all players  list: <b><span id="players"></span></b></div>
    <div>current exit list: <b><span id="price"></span></b></div>
    <div>
        <button class="btn btn-primary btn-large" onclick='sendmessage()'>Yes</button>
    </div>

{% endblock %}


{% block scripts %}
    <script type="text/javascript" src="/static/otree/js/jquery.countdown.min.js"></script>
    <!--<script>-->
        <!--var milliseconds =-->
        <!--{{time_left}}*-->
        <!--1000;-->
        <!--var winner = 'You are the largest bidder right now';-->
        <!--var loser = 'You are NOT the largest bidder right now!';-->
        <!--update_create_countdown(milliseconds);-->

        <!--function update_create_countdown(milliseconds) {-->
            <!--$('div#otree-timeout').show();-->
            <!--var currentDate = new Date();-->

            <!--$('span#otree-timer__time-left').countdown(currentDate.valueOf() + milliseconds)-->
                <!--.on('update.countdown', function (event) {-->
                    <!--// %-N is "Total count of minutes till the end, non-padded"-->
                    <!--// %S is seconds left-->
                    <!--var format = '%-N:%S';-->
                    <!--$(this).html(event.strftime(format));-->
                <!--})-->
                <!--.on('finish.countdown', function (event) {-->
                    <!--$('<input>').attr({-->
                        <!--type: 'hidden',-->
                        <!--name: 'timeout_happened',-->
                        <!--value: '1'-->
                    <!--}).appendTo('form');-->
                    <!--$('#form').submit();-->
                <!--});-->
        <!--};-->


        <!--function curtime() {-->
            <!--return (new Date().getTime());-->
        <!--}-->

        <!--window.onload = function () {-->
            <!--$('#curdate').html(curtime());-->
            <!--// This Just Initializes the Value-->
            <!--var init_val = {{initial_in}};-->
            <!--$('#price').html(init_val);-->
            <!--var init_val2 = {{player_ids}};-->
            <!--$('#players').html(init_val2);-->
            <!--curbtntxt = 'Exit';-->
            <!--$('#ebaybtn').prop('value', curbtntxt);-->

            <!--var ws_scheme = window.location.protocol == "https:" ? "wss" : "ws";-->
            <!--var socket = new WebSocket(ws_scheme + '://' + window.location.host + "/ebay/group{{group.id}}");-->


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

            <!--sendmessage = function (what) {-->
                <!--var msg = {-->
                    <!--id: {{player.id}},-->
                    <!--id_in_group: {{player.id_in_group}},-->
                <!--};-->
                <!--if (socket.readyState === socket.OPEN) {-->
                    <!--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) {-->
                <!--var obj = jQuery.parseJSON(event.data);-->
                <!--curprice = obj.buyer;-->
                <!--curprice = obj.inmembers;-->
                <!--$('#price').html(curprice);-->
                <!--curbtntxt = curprice > 0 ? 'Raise price' : 'Buy';-->
                <!--$('#ebaybtn').prop('value', curbtntxt);-->
                <!--$('#time_left').html(obj.time_left);-->
                <!--curwinner = obj.winner =={{player.id_in_group}} ? winner : loser;-->
                <!--$('#winner').html(curwinner);-->
                <!--milliseconds = obj.time_left * 1000;-->
                <!--selectedDate = new Date().valueOf() + milliseconds;-->
                <!--update_create_countdown(milliseconds);-->
            <!--};-->


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


        <!--};-->

    <!--</script>-->
{% endblock %}

{% block styles %}
    <style>
        .large {
            font-size: 120%;
        }
    </style>
{% endblock %}