{{ block title }}Part 2: Stage 2{{ endblock }}
{{ block content }}
    <p>
        In this stage, participants A are the sole decision-makers. As a participant A you will be allocating the 200 tokens you earned in the first stage between you and
               participant B. The avatars of matched players are shown below.
    </p>



<div id="avatarContainer">
  <div class="avatar-wrapper">
    <img src="" alt="Avatar" class="avatar-image" id="avatar-image1">
    <img class="topImage" src="" style="display: none;" height="35 " width="75">
    <div class="caption">You (Participant A)</div>
  </div>
    <div class="avatar-wrapper">
    <img src="" alt="Avatar" class="avatar-image" id="avatar-image2">
    <img class="topImage" src="" style="display: none;" height="35" width="75">
    <div class="caption">Participant B</div>
  </div>
  <div class="avatar-wrapper">
    <img src="" alt="Avatar" class="avatar-image" id="avatar-image3">
    <img class="topImage" src="" style="display: none;" height="35" width="75">
    <div class="caption">Participant C</div>
  </div>
</div>

<div class="card bg-light m-3">
    <div class="card-body">
          <h5> Income calculations: </h5>
<p>
<b> Participant A (You):</b> 200 tokens (your earnings from puzzles)
  <br> &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp  &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp&nbsp minus number of tokens allocated to participant B by you
<br> &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp  &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp&nbsp  minus 3 times the number of deduction tokens transferred to you by participant C <br>
 <b> Participant B: </b> number of tokens you allocated to participant B<br>
 <b> Participant C: </b> 100 (participant C's earnings from puzzles) <br>  &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp   &nbsp &nbsp &nbsp &nbsp &nbsp&nbsp&nbsp minus number of deduction tokens participant C transfers to you
</p>
 </div>
</div>
<script>
  function generateAvatar(avatarIndex, clothingType, clothingColor, topType,backgroundima) {
    var url = `https://avataaars.io/?avatarStyle=Transparent&skinColor=Yellow&topType=${topType}&clotheColor=${clothingColor}&clotheType=${clothingType}&graphicType=Resist`;
    var avatarImage = document.getElementById(`avatar-image${avatarIndex}`);
    avatarImage.src = url;

    var avatarWrapper = document.querySelector(`#avatarContainer .avatar-wrapper:nth-child(${avatarIndex})`);
    avatarWrapper.style.backgroundImage = `url('${backgroundima}')`;

    var topImage = document.querySelector(`#avatarContainer .avatar-wrapper:nth-child(${avatarIndex}) .topImage`);
    if ( clothingColor ==="Gray01" ) {
        topImage.src = "{{ static 'rainbow.png' }}";
        topImage.style.display = "block";
        topImage.height= 45;
        topImage.width= 110;
        topImage.style.bottom= '1px';
        topImage.style.left= '80px';
    }else if( clothingColor ==="Gray02") {
        topImage.src = "{{ static 'Peace.png' }}";
        topImage.style.display = "block";
        topImage.height= 80;
        topImage.width= 80;
        topImage.style.bottom= '-9px';
        topImage.style.left= '94px';
    }
    else {
        topImage.style.display = "none";
    }
  }

  var selectedOption1 = js_vars.topc;
  var clothingType1 = selectedOption1.split("-")[0];
  var clothingColor1 = selectedOption1.split("-")[1];
  var topType1 = js_vars.hair1;
  generateAvatar(1, clothingType1, clothingColor1, topType1,js_vars.backgroundim);

  var selectedOption2 = js_vars.thridpartyshirt;
  var clothingType2 = selectedOption2.split("-")[0];
  var clothingColor2 = selectedOption2.split("-")[1];
  var topType2 = js_vars.thrid_p_hair;
  generateAvatar(2, clothingType2, clothingColor2, topType2,"https://i.imgur.com/l5sL9Vr.jpg");

  var selectedOption3 = js_vars.receivershirt;
  var clothingType3 = selectedOption3.split("-")[0];
  var clothingColor3 = selectedOption3.split("-")[1];
  var topType3 = js_vars.receiver_hair;
  generateAvatar(3, clothingType3, clothingColor3, topType3,"https://i.imgur.com/l5sL9Vr.jpg");

</script>

<p>Please choose how many tokens you would like to transfer to participant B. You must click on the slider for values to be displayed.</p>

<div class="d-flex justify-content-between align-items-center my-4">
    <span class="font-weight-bold" style="font-size: 16px;">0</span>
    <input type="range" name="give" min="0" class="slider" max="{{ C.ENDOWMENT }}" oninput="updateDescription(this)">
    <span class="font-weight-bold" style="font-size: 16px;">200</span>
</div>
<p id="description"></p>

<script>
    let description = document.getElementById('description');
    function updateDescription(input) {
        let give = parseInt(input.value);
        let keep = js_vars.endowment - give;
        description.innerText = `Transfer ${give} tokens to participant B and keep ${keep} tokens for yourself.`
    }
</script>
{{ next_button }}

<style>
  #avatarContainer {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding-bottom:50px;
  }

  .avatar-wrapper {
    position: relative;
    display: inline-block;
    width: 264px;
    height: 280px;
    background-size: cover;
    background-position: center;
      border-radius: 47%;
  }

  .avatar-image {
    width: 264px;
    height: 280px;
  }

  .topImage {
     position: absolute;
        bottom: 7px;
        left: 36%;
  }

  .caption {
  text-align: center;
  font-size: 20px;
}
.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #04AA6D;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #04AA6D;
  cursor: pointer;
}
</style>






<style>

</style>

{{ endblock }}