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

{% block styles %}
    <link href="{% static 'pn_selection/Wheel.css' %}" rel="stylesheet">

 <style>
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');

.otree-title.page-header{
       font-size: 40px;
   }
p{
    font-size: 22px;
    text-indent:0em;
    text-align: left;
}
ul{
    font-size: 22px;
}
h2{
    text-align: center;
}

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
html,body{
  display: grid;
  height: 100%;
  text-align: center;
  place-items: center;
  {#background: #664AFF;#}
    background-color: white;
}
.range{
  height: 250px;
  width: 910px;
  background: #fff;
  border-radius: 10px;
  padding: 0px 65px 0 45px;
  box-shadow: 2px 4px 8px rgba(0,0,0,0.1);

}


.sliderValue{
  position: relative;
  width: 100%;
}

.sellerValue{
  position: relative;
  width: 100%;
}

.sliderValue span{
  position: absolute;
  height: 45px;
  width: 45px;
  transform: translateX(-70%) scale(0);
  font-weight: 500;
  top: -25px;
  line-height: 55px;
  z-index: 2;
  color: #fff;
  transform-origin: bottom;
  transition: transform 0.3s ease-in-out;

}

.sellerValue span{
  position: absolute;
  {#left: calc(({{ random_initial }}-50) * 87 / 350 + 13) + "%";#}
  transform: translate(-7px,182px); /* -7px is set after careful calibration*/
  font-size: 18px;
  color: red;
  font-weight: 600;
  z-index: 5;
   background-color: white;
}

.sliderValue span.show{
  transform: translateX(-70%) scale(1);
}
.sliderValue span:after{
  position: absolute;
  content: '';
  height: 100%;
  width: 100%;
  background: #664AFF;
  border: 3px solid #fff;
  z-index: -1;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  border-bottom-left-radius: 50%;
  box-shadow: 0px 0px 8px rgba(0,0,0,0.1);
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
}
.field{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  position: relative;
}
.field .value{
  position: absolute;
  font-size: 18px;
  font-weight: 600;
}
.field .value.left{
  left:-1%;
  transform: translate(0px,70px);
}

.field .value.blueleft{
  transform: translate(-20%,95px);
}

.field .value.xblueleft{
  transform: translate(-35%,95px);
}

.field .value.blueright{
  transform: translate(20px,95px);
}

.field #guess_minnum {
  left:12%;
  transform: translate(-0.5%,95px);
}

.field #guess_maxnum{
    {#width: 90px;#}
    {#border: black 1px solid;#}
    white-space: nowrap;
  left:98%;
  transform: translate(0px,95px);
}

.field .value.start{
  left: 10%;
  transform: translate(15px,70px);
}

.field .value.bstart{
  left: 12.5%;
  transform: translate(0px,70px);
}

.field .value.right{
  right: -3%;
  transform: translate(-4px,70px);
}

#buyer_value{
    border: black 2px solid;
    width: 16%;
    color: #664AFF;
    transform:  translate(0px,107px);
    background-color: white;
    z-index: 2;
    margin: 0px;
    padding: 0px;
}

#Bvalue_box{
    border: black 2px solid;
    width: 15%;
    color: #664AFF;
    transform:  translate(0px,75px);
    background-color: white;
    z-index: 2000;
    margin: 0px;
    padding: 0px;
    display: none;
    line-height: 1;
}

#seller_offer{
    border: black 2px solid;
    width: 18%;
    color: red;
    transform:  translate(0px,-60px);
    background-color: white;
    z-index: 2;
    margin: 0px;
    padding: 0px;
}


#pre_offer{
    border: none;
    width: 17%;
    color: black;
    transform:  translate(0px,-80px); /*80 is set after careful calibration*/
    background-color: white;
    z-index: 2;
    margin: 0px;
    padding: 0px;
    padding-top: 8px;
    padding-bottom: 8px;
    line-height: 1;
    {#left: calc(({{ random_initial }}-50) * 87 / 350 + 7) + "%";#}
}

#last_offer{
    border: none;
    width: 17%;
    color: black;
    transform:  translate(0px,-80px); /*80 is set after careful calibration*/
    background-color: white;
    z-index: 1;
    margin: 0px;
    padding: 0px;
    padding-top: 8px;
    padding-bottom: 8px;
    line-height: 1;
    {#left: calc(({{ random_initial }}-50) * 87 / 350 + 7) + "%";#}
    display: none;
}


.range #buyer_bar{
    position: absolute;
  width: 87.5%;
  left: 12.5%;
  height: 74px;
  background: #6DAAE7;
  outline: none;
  border: none;
  z-index: 99;
}

.range #seller_range{
    position: absolute;
  width: 100%;
  height: 74px;
  background-color: #E7E7E7;
  outline: none;
  border: none;
  z-index: 1111;
}

#buyer_range{
    position: absolute;
  {#width: 87.5%;#}
  {#transform: translateX(7%); /*ratio 7.5% after careful calibration*/#}
  height: 74px;
  background: yellow;
  outline: none;
  border: none;
  z-index: 1111;
}

.field #buyer_tick{
    position: absolute;
    background-color: blueviolet;
    height: 77px;
    width: 0.7%;
    z-index: 9999;
}

.field #seller_tick{
    position: absolute;
    background-color: red;
    height: 77px;
    width: 15px;
    z-index: 10000;
    clip-path: polygon(70% 0, 70% 75%, 100% 75%, 50% 100%, 0 75%, 30% 75%, 30% 0);
    transform: translateX(-5px);
}

.field #preoffer_tick_red{
    position: absolute;
    background-color: red;
    height: 77px;
    width: 15px;
    z-index: 10000;
    display: none;
    clip-path: polygon(70% 0, 70% 75%, 100% 75%, 50% 100%, 0 75%, 30% 75%, 30% 0);
    transform: translateX(-5px);
}

.field #preoffer_tick_blue{
    position: absolute;
    background-color: dodgerblue;
    height: 77px;
    width: 15px;
    z-index: 10000;
    display: none;
    clip-path: polygon(70% 0, 70% 75%, 100% 75%, 50% 100%, 0 75%, 30% 75%, 30% 0);
    transform: translateX(-5px);
}

.field #Bvalue_tick{
    position: absolute;
    left: calc({{ B_value }}/4 ) + "%";
    background-color: blue;
    height: 100px;
    width: 5px;
    z-index: 10000;
    display: none;

}


.range .axis{
  position: absolute;
  width: 100%;
  background: blue;
  transform: translateY(40px);
  z-index: 2;
  height: 3px;
}

.double_slider .axis{
  position: absolute;
  width: 100%;
  background: blue;
  transform: translateY(40px);
  z-index: 2;
  height: 3px;
}
/*
In the following blocks, we try to decorate the track part of the range input
*/
.range input{
  -webkit-appearance: none;
  width: 100%;
  height: 74px;
  background-color: rgba(0, 0, 0, 0.08);
  outline: none;
  border: none;
  z-index: 2222;
}
.range input::-moz-range-track{
  {#background: #664AFF; /*this progress background is only shown on Firefox*/#}
  width: 100%;
  height: 74px;
  {#background-color: rgba(0, 0, 0, 0.08);#}
  outline: none;
  border: none;
  z-index: 2222;
}

.range input::-ms-fill-lower,
.range input::-ms-fill-upper {
  background: transparent;
}

.range input::-ms-track {
  -webkit-appearance: none;
  width: 100%;
  height: 74px;
  background-color: rgba(0, 0, 0, 0.08);
  outline: none;
  border: none;
  z-index: 2222;
}

/*
In the following blocks, we try to decorate the thumb part of the range input
*/
.range input.offer::-webkit-slider-thumb{/*Webkit Browsers like Chrome and Safari*/
  -webkit-appearance: none;
  width: 15px;
  height: 100px;
  background: red;
  border: 1px solid #664AFF;
  cursor: pointer;
    clip-path: polygon(70% 0, 70% 75%, 100% 75%, 50% 100%, 0 75%, 30% 75%, 30% 0);
  transform: translateX(-5px);
}


.range input.offer::-moz-range-thumb{ /*Firefox*/
  -webkit-appearance: none;
  width: 15px;
  height: 100px;
  background: red;
  border: 1px solid #664AFF;
  cursor: pointer;
    clip-path: polygon(70% 0, 70% 75%, 100% 75%, 50% 100%, 0 75%, 30% 75%, 30% 0);
    transform: translateX(-5px);
}

range input.offer::-ms-thumb{/*Internet Explorer*/
  width: 15px;
  height: 100px;
  background: red;
  border: 1px solid #664AFF;
  cursor: pointer;
    clip-path: polygon(70% 0, 70% 75%, 100% 75%, 50% 100%, 0 75%, 30% 75%, 30% 0);
    transform: translateX(-5px);
}



.my_buttons{
    padding: 30px;
}

.my_buttons button{
    margin-left: 30px;
    padding: 5px;
    font-size: 23px;
}

.First_sentence{
    font-size: 22px;
    margin: 20px;
}

.Things{
    margin: 20px;
    text-align: left;
    font-size: 22px;
}

.not-clicked::-webkit-slider-thumb{
  -webkit-appearance: none;
  visibility: hidden;
}

.not-clicked::-moz-range-thumb{
  -webkit-appearance: none;
  visibility: hidden;
}

#sellerBubble.not-clicked {
    visibility: hidden;
}

#pre_offer.not-clicked {
    visibility: hidden;
}

#offerButton.not-clicked{
    visibility: hidden;
}

#seller_gain.not-clicked{
    visibility: hidden;
}

#guessButton.lnot_moved{
    visibility: hidden;
}

#guessButton.rnot_moved{
    visibility: hidden;
}

.clicked{
    visibility: visible;
}

#main_screen.transitioning{
    display: none;
}

#transition_screen.transitioning{
    display: block;
}

#transition_screen{
    display: none;
}

input.guess[type=range] {
	position: absolute;
	pointer-events: none;
	-webkit-appearance: none;
	z-index: 100000;
	height: 100px;
	width: 100%;
	background-color: rgba(255,255,255,0.2);
}

input[type=range].guess::-moz-range-track {
	position: absolute;
	pointer-events: none;
	z-index: 100000;
	height: 100px;
	width: 100%;
	{#background-color: rgba(255,255,255,0.2);#}
}

input.guess[type=range]::-ms-track {
	position: absolute;
	pointer-events: none;
	-webkit-appearance: none;
	z-index: 100000;
	height: 100px;
	width: 100%;
	background-color: rgba(255,255,255,0.2);
}

#guess-left::-webkit-slider-thumb {
	pointer-events: all;
    cursor: grabbing;
	width: 10px;
	height: 120px;
	border-radius: 0;
	background-color: orange;
	-webkit-appearance: none;
    border: 1px solid yellow;
     {#clip-path: polygon(0% 0%, 30% 15%, 30% 85%, 0% 100%, 50% 90% , 100% 100% , 70% 85% , 70% 15%, 100% 0%, 50% 10%);#}
    clip-path: polygon(0% 100%, 100% 100%, 80% 90%, 80% 10%, 100% 0%, 0% 0%, 20% 10%, 20% 90%);
}

#guess-right::-webkit-slider-thumb {
	pointer-events: all;
    cursor: grabbing;
	width: 10px;
	height: 120px;
	border-radius: 0;
	background-color: purple;
	-webkit-appearance: none;
    border: 1px solid #664AFF;
     {#clip-path: polygon(0% 0%, 30% 15%, 30% 85%, 0% 100%, 50% 90% , 100% 100% , 70% 85% , 70% 15%, 100% 0%, 50% 10%);#}
    clip-path: polygon(0% 100%, 100% 100%, 80% 90%, 80% 10%, 100% 0%, 0% 0%, 20% 10%, 20% 90%);
}


#guess-left::-moz-range-thumb{ /*Firefox*/
	pointer-events: all;
    cursor: grabbing;
	width: 10px;
	height: 120px;
	border-radius: 0;
	background-color: orange;
    border: 1px solid yellow;
     {#clip-path: polygon(0% 0%, 30% 15%, 30% 85%, 0% 100%, 50% 90% , 100% 100% , 70% 85% , 70% 15%, 100% 0%, 50% 10%);#}
    clip-path: polygon(0% 100%, 100% 100%, 80% 90%, 80% 10%, 100% 0%, 0% 0%, 20% 10%, 20% 90%);
}


#guess-right::-moz-range-thumb{ /*Firefox*/
	pointer-events: all;
    cursor: grabbing;
	width: 10px;
	height: 120px;
	border-radius: 0;
	background-color: purple;
    border: 1px solid #664AFF;
     {#clip-path: polygon(0% 0%, 30% 15%, 30% 85%, 0% 100%, 50% 90% , 100% 100% , 70% 85% , 70% 15%, 100% 0%, 50% 10%);#}
    clip-path: polygon(0% 100%, 100% 100%, 80% 90%, 80% 10%, 100% 0%, 0% 0%, 20% 10%, 20% 90%);
}


input.not_guess[type=range]::-webkit-slider-thumb{
    	pointer-events: none;
        -webkit-appearance: none;
        display: none;
}

input.not_guess[type=range]::-moz-range-thumb{ /*Firefox*/
    	pointer-events: none;
        visibility: hidden;
}


#guessButton.not_guess{
    display: none;
}

#guess_maxnum.not_guess{
    display: none;
}

#guess_minnum.not_guess{
    display: none;
}

 </style>

{% endblock %}



{{ block content }}
    <br>
      <h2><u>Round {{ roundnum }}: Event Summary</u></h2>
      <br>
      <p>This is the end of Round {{ roundnum }}. The details are:</p>


 <div id = "main_screen">

            <div class="First_sentence" id="The_price">Member A selected a {{choice_N}}-piece cut. </div>

    <div class="range">

        <div class="field">
                  <div class="value left">  0.0</div>

            <div id="preoffer_tick_blue" style="display: block; left: {{value_X}}%"></div>
            <div class="value xblueleft" style="left: {{value_X}}%; top: -21%"><span><i>X</i>={{value_X}}</span></div>

            <div id="preoffer_tick_red" style="display: block; left: {{guess_Y}}%"></div>
            <div class="value xblueleft" style="left: {{guess_Y}}%; top: -21%"><span><i>G</i>={{guess_Y}}</span></div>


            <div id="seller_range">
            </div>

            <div id="buyer_range" style=" left:{{ guessed_min }}%; right: {{ guessed_max }}% "></div>
            {{ if guessed_min_int != 0}}
            <div class="value blueleft" style="left: {{ guessed_min }}%"><span>{{ guessed_min }}</span></div>
            {{endif}}
            {% if guessed_min_int != guessed_max_int and guessed_max_int != 1000 %}
            <div class="value blueright" style="right: {{ guessed_max }}%"><span>{{ adjusted_guessed_max }}</span></div>
            {% endif %}

            <div class="value right"> 100.0</div>
          <div class="axis"> </div>
        </div>
        </div>

<br>
<br>
<h2><p style="font-size: 33px">Your reward points for this round:&emsp;{% if player.id_in_group == 2 %} {{points_B}} {% else %} {{points_A}} {% endif %}</p></h2>

     <br>

<p>Click “Next” below to proceed.</p><br>

    {{ next_button }}

</div>

{% endblock %}