{{ extends 'global/Page.html' }}
{{ block title }}Title{{ endblock }}

{{ block content }}

<img id="avatar_image"src='https://avataaars.io/?avatarStyle=Circle&topType=NoHair&accessoriesType=Blank&facialHairType=Blank&clotheType=BlazerShirt&eyeType=Default&eyebrowType=Default&mouthType=Default&skinColor=Light'
/>
   
<div class="dropdown2">
    <br>
        Tops:
        <br>
    <select id="topType" onchange="func()"><option value="NoHair">NoHair</option><option value="Eyepatch">Eyepatch</option><option value="Hat">Hat</option><option value="Hijab">Hijab</option><option value="Turban">Turban</option><option value="WinterHat1">WinterHat1</option><option value="WinterHat2">WinterHat2</option><option value="WinterHat3">WinterHat3</option><option value="WinterHat4">WinterHat4</option><option value="LongHairBigHair">LongHairBigHair</option><option value="LongHairBob">LongHairBob</option><option value="LongHairBun">LongHairBun</option><option value="LongHairCurly">LongHairCurly</option><option value="LongHairCurvy">LongHairCurvy</option><option value="LongHairDreads">LongHairDreads</option><option value="LongHairFrida">LongHairFrida</option><option value="LongHairFro">LongHairFro</option><option value="LongHairFroBand">LongHairFroBand</option><option value="LongHairNotTooLong">LongHairNotTooLong</option><option value="LongHairShavedSides">LongHairShavedSides</option><option value="LongHairMiaWallace">LongHairMiaWallace</option><option value="LongHairStraight">LongHairStraight</option><option value="LongHairStraight2">LongHairStraight2</option><option value="LongHairStraightStrand">LongHairStraightStrand</option><option value="ShortHairDreads01">ShortHairDreads01</option><option value="ShortHairDreads02">ShortHairDreads02</option><option value="ShortHairFrizzle">ShortHairFrizzle</option><option value="ShortHairShaggyMullet">ShortHairShaggyMullet</option><option value="ShortHairShortCurly">ShortHairShortCurly</option><option value="ShortHairShortFlat">ShortHairShortFlat</option><option value="ShortHairShortRound">ShortHairShortRound</option><option value="ShortHairShortWaved">ShortHairShortWaved</option><option value="ShortHairSides">ShortHairSides</option><option value="ShortHairTheCaesar">ShortHairTheCaesar</option><option value="ShortHairTheCaesarSidePart">ShortHairTheCaesarSidePart</option></select>
</div>

<script>
    	function func(){
      	var dropdown_a = document.getElementById("topType");
        var selection_a = dropdown_a.value;
      	console.log(selection_a);
        var emailTextBox_a = document.getElementById("id_Top");
        emailTextBox_a.value = selection_a;
        var avatar_image= document.getElementById("avatar_image");
            avatar_image.src="https://avataaars.io/?avatarStyle=Circle&facialHairType=Blank&clotheType=BlazerShirt&eyeType=Default&eyebrowType=Default&mouthType=Default&skinColor=Light&accessoriesType=Wayfarer&topType="+selection_a;
           }

</script>

{{ formfields }}

<br>
<br> 
<br>
{{ next_button }}

{{ endblock }}