{% extends "global/Page.html" %}
{% load otree static %}

{% block title %}
Results of round {{ player.round_number }}
{% endblock %}

{% block styles %}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">

    <style>
        .otree-timer {
            display: none;
        }
    </style>

    <link rel="stylesheet" type="text/css" href="{% static 'cutcake_cut_middle_2/styles/general.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'cutcake_cut_middle_2/styles/preference.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'cutcake_cut_middle_2/styles/slider.css' %}">

{% endblock %}

{% block content %}
<div class="container">
    <div class="row" style="text-align: left; height: 100px; position: relative;">
        <p>
            <font size="+1">
                {% if part == 'right' %}
                    You get the right part in this round.<br>
                    You are assigned the dark red part of the cake and earn {{ player.payoff }}. <br>
                    Until now you have played for {{ R }} round(s) and earned {{ player.payoff_help }} in total.
                {% elif part == 'left' %}
                    You get the left part in this round.<br>
                    You are assigned the black part of the cake and earn {{ player.payoff }}. <br>
                    Until now you have played for {{ R }} round(s) and earned {{ player.payoff_help }} in total.
                {% endif %}
            </font>
        </p>
    </div>
    <div class="row" style="top:15px; height: 200px; position: relative">
        <div class="container_cake">
                <div class="rectangle_white_header"></div>
                <div class="rectangle_red_cake"></div>
                {% if player.id_in_group == 1 %}
                    <div class="rectangle_pos11"></div>
                    <div class="rectangle_pos12"></div>
                    <div class="rectangle_pos13"></div>
                    <div class="rectangle_pos14"></div>
                    <div class="rectangle_pos15"></div>
                {% elif player.id_in_group == 2 %}
                    <div class="rectangle_pos21"></div>
                    <div class="rectangle_pos22"></div>
                    <div class="rectangle_pos23"></div>
                    <div class="rectangle_pos24"></div>
                    <div class="rectangle_pos25"></div>
                {% endif %}
                <div class="rectangle_cover" id="cover"></div>
                <div class="knife" id="knife"><i class="bi bi-scissors"></i></div>
        </div>
    </div>
    <div class="row" style="top:15px; position: relative;">
        <div class="col-md-2">
            <font size="+1">
                Round
             </font>
        </div>
        <div class="col-md-2">
           <font size="+1">
               Own Value
            </font>
        </div>
        <div class="col-md-2">
           <font size="+1">
               Value of black
            </font>
        </div>
    </div>
    <div class="row" style="top:15px; position: relative;">
        <div class="col-md-2">
            <font size="+1">
                {{ player.round_number }}
             </font>
        </div>
        <div class="col-md-2">
           <font size="+1">
               {{ player.value_own_piece }}
            </font>
        </div>
        <div class="col-md-2">
           <font size="+1">
               {{ player.value_other_piece }}
            </font>
        </div>
    </div>
    <div class="row" style="top:45px; position: relative;">
        <div class="col-md-2">
            <button type="submit" id="button_right" class="btn btn-primary">next</button>
        </div>
        <div class="col-md-10">
            <font size="+1">
                Please  click on the button, and then wait for the remaining player to proceed...<br>
                Otherwise you will be automatically redirected to the next page after 45s.
            </font>
        </div>
    </div>
</div>

{% endblock %}


{% block scripts %}
<script type="text/javascript">
    $(document).ready(function() {
       document.getElementById("cover").style.width = js_vars.resolving_cut.toString().concat("px");
       document.getElementById("knife").style.left = (js_vars.resolving_cut -5).toString().concat("px");
    });
</script>

<script>
    $(function () {
        $('.otree-timer__time-left').on('update.countdown', function (event) {
            if (event.offset.totalSeconds === 10) {
                $('.otree-timer').show();
            }
        });
    });
</script>
{% endblock %}