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

{% block title %}
{% endblock %}

{% block styles %}
    <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 %}
<input type="hidden" name="cut_value" id="cut_value">
<div class="page">
    <div class="top" style="text-align: center;">
        <p>
            <h4>Cut Middle against 1 opponent</h4>
            <br>
            Description: <br>
            You will cut the cake into two parts.
            Your opponent also cuts the cake into two.<br>
            We cut the cake in the middle and you get the part that includes your cut. <br> <br>
            Suggestion: <br>
            If you cut the cake in two pieces both worth 60 points,
            you guarantee that you will receive 60 points. <br>
            Dividing the cake differently may give you more points,
            but may also give you less.
        </p>
    </div>
    <div class="middle">
        <div class="container">
             <div class="row" style="height: 15px; position: relative;">
                <div class="col-md-2">
                </div>
                <div class="col-md-5">
                    <font size="+1" >Round {{ R }}</font>
                </div>
                <div class="col-md-5">
                    <font size="+1" >Your score: {{ P }}</font>
                </div>
            </div>
            <div class="row" style="top: 10px; height: 200px; position: relative;">
                <div class="col-md-2"></div>
                <div class="col-md-8">
                    <div class="container_cake">
                            <div class="rectangle_white_header"></div>
                            <div class="rectangle_red_cake"></div>
                        {% if player.round_number <= 5 and 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.round_number > 5 and player.id_in_group == 1 %}
                            <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>
                            <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.round_number <= 5 and 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>
                        {% elif player.round_number > 5 and 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>
                            <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>
                        {% endif %}
                            <div class="slim_rectangle" id="slim"></div>
                    </div>
                    <div class="container_slider" style="left:-10px; position: relative;">
                        <input type="range" min="0" max="600" value="0" class="slider" id="slider">
                    </div>
                </div>
                <div class="col-md-2"></div>
            </div>
            <div class="row" style="top:15px; position:relative;">
                <div class="col-md-2"></div>
                <div class="col-md-5">
                    <font size="+1"> Value of left piece: <span id="value_left"></span> </font>
                </div>
                <div class="col-md-5">
                    <font size="+1"> Value of right piece: <span id="value_right"></span> </font>
                </div>
            </div>
            <div class="row" style="top:15px; position:relative;">
                <div class="col-md-2"></div>
                <div class="col-md-1">
                    <button type="submit" class="btn btn-primary" style="padding:5px 12px">Cut</button>
                </div>
                <div class="col-md-4" style="left: 0px; position: relative">
                    <button type="button" class="btn btn-primary" style="padding:5px 12px" onclick="nudgeFunc()" >Show Suggestion</button>
                </div>
                <div class="col-md-5"></div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
    <script type="application/javascript" src="{% static 'cutcake_cut_middle_2/scripts/readyFunc.js' %}"></script>
    <script type="application/javascript" src="{% static 'cutcake_cut_middle_2/scripts/slider.js' %}"></script>
    <script type="application/javascript" src="{% static 'cutcake_cut_middle_2/scripts/nudge.js' %}"></script>
{% endblock %}