{% 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');
*{
  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: 1000px;
  background: #fff;
  border-radius: 10px;
  padding: 0px 61px 0 115px;
  box-shadow: 2px 4px 8px rgba(0,0,0,0.1);
}

.range .seller_range{
    position: absolute;
  width: 100%;
  height: 100px;
  background-color: rgba(255, 253, 253, 0.05);
  outline: none;
  border: none;
  z-index: 1111;
}

.range .buyer_bar{
    position: absolute;
  height: 100px;
  background: #ffffff;
  outline: none;
  border: none;
  z-index: 2222;
}

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


.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.bstart{
  left: 12.5%;
  transform: translate(0px,70px);
}

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

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

.field .seller_tick{
    position: absolute;
    background-color: red;
    height: 100px;
    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 .guess_tick{
    position: absolute;
    height: 150px;
    width: 0.8%;
    z-index: 10000;
}


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

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

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

.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;
}


.lcircle {
    position: absolute;
    background: orange;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin: 0;
}

.rcircle {
    position: absolute;
    background: #993399;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin: 0;
}



.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 21px;
}

.expanded, .collapsible:hover {
  background-color: #555;
}

.collapsible:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.expanded:after {
  content: "\2212";
}

.content {
    padding: 0 18px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    background-color: #f1f1f1;
}


.my_buttons{
    padding: 30px;
}

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

.First_sentence{
    font-size: 30px;
    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 title %}
    {% if player.id_in_group == 2 %} Seller {% else %}  Buyer {% endif %} page [Match {{ matchnum }}, Round <span class="round_n"> {{ roundnum }} </span>]
{% endblock %}


{% block content %}

<div id = "main_screen">
{#    page for buyer#}

        <div class="range">
            <div class="sellerValue">
                {{ if seller_offer == "low"}}
                  <span class="sellerBubble" style="left: 0%;"> {{ seller_offer_display }} </span>
                {{ endif }}
                {{ if seller_offer == "middle"}}
                  <span class="sellerBubble" style="left: {{ middle_offer_tick_position }}%;"> {{ seller_offer_display }} </span>
                {{ endif }}
                {{ if seller_offer == "high"}}
                  <span class="sellerBubble" style="left: 90%;"> {{ seller_offer_display }} </span>
                {{ endif }}
            </div>
        <div class="field">
                  <div class="value left">  0</div>
                  <div class="value bstart">  {{ low_value_display }}</div>
            {{ if seller_offer == "low"}}
            <div class="seller_tick" style="  left: {{ low_offer_tick_position }}%">  </div>
            {{ endif }}
            {{ if seller_offer == "middle"}}
            <div class="seller_tick" style="  left: {{ middle_offer_tick_position }}%">  </div>
            {{ endif }}
            {{ if seller_offer == "high"}}
            <div class="seller_tick" style="  left: {{ high_offer_tick_position }}%">  </div>
            {{ endif }}

            {{ if buyer_value == "50"}}
            <div class="buyer_tick" style="  left: {{ low_buyer_tick_position }}%">  </div>
            {{ endif }}
            {{ if buyer_value == "vM"}}
            <div class="buyer_tick" style="  left: {{ vm_buyer_tick_position }}%">  </div>
            {{ endif }}
            {{ if buyer_value == "500"}}
            <div class="buyer_tick" style="  left: {{ high_buyer_tick_position }}%">  </div>
            {{ endif }}

            <div class="seller_range">
                {{ if seller_offer == "low"}}
                <div class="value seller_offer" style="text-align: center; left: -10%;">
                    Seller's price offer <br> {{ seller_offer_display }}
                </div>
                {{ endif }}
                {{ if seller_offer == "middle"}}
                <div class="value seller_offer" style="text-align: center; left: {{ middle_offer_label_position }}%;">
                    Seller's price offer <br> {{ seller_offer_display }}
                </div>
                {{ endif }}
                {{ if seller_offer == "high"}}
                <div class="value seller_offer" style="text-align: center; left: {{ high_offer_label_position }}%;">
                    Seller's price offer <br> {{ seller_offer_display }}
                </div>
                {{ endif }}
            </div>

            <div class="buyer_bar" style="  width: 87.5%;   left: 12.5%;">
                {{ if buyer_value == "50" }}
                <div class="value" id="buyer_value" style=" left: {{ low_buyer_label_position }}%">  Your value: <i>{{ low_value_display }}</i> </div>
                {{ endif }}
                {{ if buyer_value == "vM" }}
                <div class="value" id="buyer_value" style=" left: {{ vm_buyer_label_position }}%">  Your value: {{ vm_display }} </div>
                {{ endif }}
                {{ if buyer_value == "500" }}
                <div class="value" id="buyer_value" style=" left: {{ high_buyer_label_position }}%">  Your value: <i>{{ high_value_display }}</i> </div>
                {{ endif }}
            </div>


            <div class="value right"> {{ high_value_display }}</div>
          <div class="axis"> </div>
        </div>
        </div>

        <div class="First_sentence" id="The_price">
            The seller offer is {{ seller_offer_display }}. <br>
            The buyer took the outside option. <br>
            As a result, your earning in this match is {% if player.id_in_group == 2 %} 0 {% else %} {{ outside_option_payoff }} {{ endif }}tokens.
        </div>

        <button class="otree-btn-next btn btn-primary" id="next_page" style="font-size: 26px; visibility: visible;"> Confirm </button>

</div>

{{ endblock }}