{{ block title }}Create Your Avatar{{ endblock }}

{{ block content }}

<div style="
justify-content: left;
display: flex;">
    <br>
    <br>
    <img id="avatar_image"src={{ source_default }} style="border:5px solid black">
</div>

<div class="dropdown_top">
    <br>
        Hair & Headwear:

    <select id="topType" onchange="func()">
        <option value="NoHair">NoHair</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>

    <input type="hidden" name="topType_Player" id="topType_Player" />
</div>

<div class="dropdown_hairColor">
    <br>
    Hair Color:

    <select id="hairColor" onchange="func()">
        <option value="Auburn">Auburn</option>
        <option value="Black">Black</option>
        <option value="Blonde">Blonde</option>
        <option value="BlondeGolden">BlondeGolden</option>
        <option value="Brown">Brown</option>
        <option value="BrownDark">BrownDark</option>
        <option value="PastelPink">PastelPink</option>
        <option value="Blue">Blue</option>
        <option value="Platinum">Platinum</option>
        <option value="Red">Red</option>
        <option value="SilverGray">SilverGray</option>
    </select>

    <input type="hidden" name="hairColor_Player" id="hairColor_Player" />
</div>

<div class="dropdown_hatColor">
    <br>
    Headwear Color:

    <select id="hatColor" onchange="func()">
        <option value="Blank">None</option>
        <option value="Black">Black</option>
        <option value="Blue02">Blue02</option>
        <option value="Blue03">Blue03</option>
        <option value="Gray01">Gray01</option>
        <option value="Gray02">Gray02</option>
        <option value="Heather">Heather</option>
        <option value="PastelBlue">PastelBlue</option>
        <option value="PastelGreen">PastelGreen</option>
        <option value="PastelOrange">PastelOrange</option>
        <option value="PastelRed">PastelRed</option>
        <option value="PastelYellow">PastelYellow</option>
        <option value="Pink">Pink</option>
        <option value="Red">Red</option>
        <option value="White">White</option>
    </select>

    <input type="hidden" name="hatColor_Player" id="hatColor_Player" />
</div>

<div class="dropdown_facialHair">
    <br>
    <br>
    Facial Hair:

    <select id="facialHairType" onchange="func()">
        <option value="Blank">None</option>
        <option value="BeardMedium">BeardMedium</option>
        <option value="BeardLight">BeardLight</option>
        <option value="BeardMajestic">BeardMajestic</option>
        <option value="MoustacheFancy">MoustacheFancy</option>
        <option value="MoustacheMagnum">MoustacheMagnum</option>
    </select>

    <input type="hidden" name="facialHairType_Player" id="facialHairType_Player" />
</div>

<div class="dropdown_facialHairColor">
    <br>
    Facial Hair Color:

    <select id="facialHairColor" onchange="func()">
        <option value="Auburn">Auburn</option>
        <option value="Black">Black</option>
        <option value="Blonde">Blonde</option>
        <option value="BlondeGolden">BlondeGolden</option>
        <option value="Brown">Brown</option>
        <option value="BrownDark">BrownDark</option>
        <option value="Platinum">Platinum</option>
        <option value="Red">Red</option>
    </select>

    <input type="hidden" name="facialHairColor_Player" id="facialHairColor_Player" />
</div>

<div class="dropdown_clothes">
    <br>
    <br>
    Clothes:

    <select id="clotheType" onchange="func()">
        <option value="BlazerShirt">BlazerShirt</option>
        <option value="BlazerSweater">BlazerSweater</option>
        <option value="CollarSweater">CollarSweater</option>
        <option value="GraphicShirt">GraphicShirt</option>
        <option value="Hoodie">Hoodie</option>
        <option value="Overall">Overall</option>
        <option value="ShirtCrewNeck">ShirtCrewNeck</option>
        <option value="ShirtScoopNeck">ShirtScoopNeck</option>
        <option value="ShirtVNeck">ShirtVNeck</option>
    </select>

    <input type="hidden" name="clotheType_Player" id="clotheType_Player" />
</div>

<div class="dropdown_clothesColor">
    <br>
    Clothes Color:

    <select id="clotheColor" onchange="func()">
        <option value="Black">Black</option>
        <option value="Blue02">Blue02</option>
        <option value="Blue03">Blue03</option>
        <option value="Gray01">Gray01</option>
        <option value="Gray02">Gray02</option>
        <option value="Heather">Heather</option>
        <option value="PastelBlue">PastelBlue</option>
        <option value="PastelGreen">PastelGreen</option>
        <option value="PastelOrange">PastelOrange</option>
        <option value="PastelRed">PastelRed</option>
        <option value="PastelYellow">PastelYellow</option>
        <option value="Pink">Pink</option>
        <option value="Red">Red</option>
        <option value="White">White</option>
    </select>

    <input type="hidden" name="clotheColor_Player" id="clotheColor_Player" />
</div>

<div class="dropdown_eyes">
    <br>
    <br>
    Eyes:

    <select id="eyeType" onchange="func()">
        <option value="Default">Default</option>
        <option value="Close">Close</option>
        <option value="Cry">Cry</option>
        <option value="Dizzy">Dizzy</option>
        <option value="EyeRoll">EyeRoll</option>
        <option value="Happy">Happy</option>
        <option value="Hearts">Hearts</option>
        <option value="Side">Side</option>
        <option value="Squint">Squint</option>
        <option value="Surprised">Surprised</option>
        <option value="Wink">Wink</option>
        <option value="WinkWacky">WinkWacky</option>
    </select>

    <input type="hidden" name="eyeType_Player" id="eyeType_Player" />
</div>

<div class="dropdown_eyebrows">
    <br>
    Eyebrows:

    <select id="eyebrowType" onchange="func()">
        <option value="Default">Default</option>
        <option value="Angry">Angry</option>
        <option value="AngryNatural">AngryNatural</option>
        <option value="DefaultNatural">DefaultNatural</option>
        <option value="FlatNatural">FlatNatural</option>
        <option value="RaisedExcited">RaisedExcited</option>
        <option value="RaisedExcitedNatural">RaisedExcitedNatural</option>
        <option value="SadConcerned">SadConcerned</option>
        <option value="SadConcernedNatural">SadConcernedNatural</option>
        <option value="UnibrowNatural">UnibrowNatural</option>
        <option value="UpDown">UpDown</option>
        <option value="UpDownNatural">UpDownNatural</option>
    </select>

    <input type="hidden" name="eyebrowType_Player" id="eyebrowType_Player" />
</div>

<div class="dropdown_accessories">
    <br>
    Eyewear:

    <select id="accessoriesType" onchange="func()">
        <option value="Blank">None</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>

    <input type="hidden" name="accessoriesType_Player" id="accessoriesType_Player" />
</div>

<div class="dropdown_mouth">
    <br>
    <br>
    Mouth:

    <select id="mouthType" onchange="func()">
        <option value="Default">Default</option>
        <option value="Concerned">Concerned</option>
        <option value="Disbelief">Disbelief</option>
        <option value="Eating">Eating</option>
        <option value="Grimace">Grimace</option>
        <option value="Sad">Sad</option>
        <option value="ScreamOpen">ScreamOpen</option>
        <option value="Serious">Serious</option>
        <option value="Smile">Smile</option>
        <option value="Tongue">Tongue</option>
        <option value="Twinkle">Twinkle</option>
        <option value="Vomit">Vomit</option>
    </select>

    <input type="hidden" name="mouthType_Player" id="mouthType_Player" />
</div>

<div class="dropdown_skin">
    <br>
    Skin Color:

    <select id="skinColor" onchange="func()">
        <option value="Light">Light</option>
        <option value="Tanned">Tanned</option>
        <option value="Yellow">Yellow</option>
        <option value="Pale">Pale</option>
        <option value="Brown">Brown</option>
        <option value="DarkBrown">DarkBrown</option>
        <option value="Black">Black</option>
    </select>

    <input type="hidden" name="skinColor_Player" id="skinColor_Player" />
</div>

    <input type="hidden" name="imgtag_Player" id="imgtag_Player" />



<script>

    function func(){
    var topType = document.getElementById("topType").value;
        console.log(topType);
    var accessoriesType = document.getElementById("accessoriesType").value;
        console.log(accessoriesType);
    var hatColor = document.getElementById("hatColor").value;
        console.log(hatColor);
    var hairColor = document.getElementById("hairColor").value;
        console.log(hairColor);
    var facialHairType = document.getElementById("facialHairType").value;
        console.log(facialHairType);
    var facialHairColor = document.getElementById("facialHairColor").value;
        console.log(facialHairColor);
    var clotheType = document.getElementById("clotheType").value;
        console.log(clotheType)
    var clotheColor = document.getElementById("clotheColor").value;
        console.log(clotheColor)
    var eyeType = document.getElementById("eyeType").value;
        console.log(eyeType)
    var eyebrowType = document.getElementById("eyebrowType").value;
        console.log(eyebrowType);
    var mouthType = document.getElementById("mouthType").value;
        console.log(mouthType);
    var skinColor = document.getElementById("skinColor").value;
        console.log(skinColor);

    document.getElementById("avatar_image").src=
        "https://avataaars.io/?avatarStyle=Circle"
        +"&topType="+topType
        +"&accessoriesType="+accessoriesType
        +"&hatColor="+hatColor
        +"&hairColor="+hairColor
        +"&facialHairType="+facialHairType
        +"&facialHairColor="+facialHairColor
        +"&clotheType="+clotheType
        +"&clotheColor="+clotheColor
        +"&eyeType="+eyeType
        +"&eyebrowType="+eyebrowType
        +"&mouthType="+mouthType
        +"&skinColor="+skinColor
        ;

    document.getElementById('topType_Player').value=topType;
    document.getElementById('hairColor_Player').value=hairColor;
    document.getElementById('accessoriesType_Player').value=accessoriesType;
    document.getElementById('hatColor_Player').value=hatColor;
    document.getElementById('facialHairType_Player').value=facialHairType;
    document.getElementById('facialHairColor_Player').value=facialHairColor;
    document.getElementById('clotheType_Player').value=clotheType;
    document.getElementById('clotheColor_Player').value=clotheColor;
    document.getElementById('eyeType_Player').value=eyeType;
    document.getElementById('eyebrowType_Player').value=eyebrowType;
    document.getElementById('mouthType_Player').value=mouthType;
    document.getElementById('skinColor_Player').value=skinColor;
    document.getElementById('imgtag_Player').value=document.getElementById("avatar_image").src;

    }

</script>



<br>
<br> 
<p><b>When you are finished, click the button below to save your avatar.</b></p>
{{ next_button }}

{{ endblock }}