{{ 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="dropdown1">
        <br>
        Accessories:
        <br>
        <select id="accessories" onchange="func()">
            <option value="Blank">Blank</option>
            <option value="Kurt">Kurt</option>
            <option value="Prescription01">Prescription 01</option>
            <option value="Prescription02">Prescription 02</option>
            <option value="Round">Round</option>
            <option value="Sunglasses">Sunglasses</option>
            <option value="Wayfarers">Wayfarers</option>
        </select>
    </div>
<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 = document.getElementById("accessories");
        var selection = dropdown.value;
      	console.log(selection);
        var emailTextBox = document.getElementById("id_string1");
        emailTextBox.value = selection;
        var avatar_image= document.getElementById("avatar_image");
            avatar_image.src="https://avataaars.io/?avatarStyle=Circle&topType=NoHair&facialHairType=Blank&clotheType=BlazerShirt&eyeType=Default&eyebrowType=Default&mouthType=Default&skinColor=Light&accessoriesType="+selection;
           }

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

       </script>


{{ formfields }}

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

{{ endblock }}