{{ block title }}Part 2: Stage 2{{ endblock }}
{{ block content }}




<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>

<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 answer these question below before you continue. </p>
    {{ formfields }}

{{ 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;
}nt-size: 20px;
}

</style>


{{ endblock }}