<link rel="stylesheet" href="/assets/css/miieditor.css" />
    <div class="miieditor-wrapper">

        <svg class="logotype" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 39.876" preserveAspectRatio="xMinYMin meet">
			<g id="logo_type" data-name="logo type" transform="translate(-553 -467)">
				<g id="logo" transform="translate(553 467)">
					<rect id="XMLID_158_" width="39.876" height="39.876" fill="#9d6ff3" opacity="0" />
					<g id="XMLID_6_" transform="translate(8.222 1.418)">
						<path id="XMLID_15_"
							d="M69.149,28.312c-1.051.553-.129,2.139.922,1.585a12.365,12.365,0,0,1,8.794-.571,10.829,10.829,0,0,1,6.342,4.166c.645,1,2.231.074,1.585-.922C83.308,27.169,74.7,25.436,69.149,28.312Z"
							transform="translate(-64.246 -23.389)" fill="#9d6ff3" />
						<path id="XMLID_14_"
							d="M82.64,14.608A15.565,15.565,0,0,0,73.5,8.45a17.535,17.535,0,0,0-12.647.9c-1.051.553-.129,2.139.922,1.585,3.411-1.788,7.6-1.714,11.209-.719,3.1.848,6.268,2.544,8.038,5.309C81.681,16.543,83.267,15.622,82.64,14.608Z"
							transform="translate(-57.476 -7.693)" fill="#9d6ff3" />
						<path id="XMLID_9_"
							d="M55.68,47.8a10.719,10.719,0,0,0-6.71,2.3H45.983A1.336,1.336,0,0,0,44.6,51.376V75.84a1.431,1.431,0,0,0,1.383,1.383h3.023a1.367,1.367,0,0,0,1.309-1.383V68.392A10.993,10.993,0,1,0,55.68,47.8Zm0,17.182a6.213,6.213,0,1,1,6.213-6.213A6.216,6.216,0,0,1,55.68,64.982Z"
							transform="translate(-44.6 -40.406)" fill="#9d6ff3" />
					</g>
				</g>
				<text id="Pretendo" transform="translate(593 492)" fill="#fff" font-size="17"
					font-family="Poppins-Bold, Poppins" font-weight="700">
					<tspan x="0" y="0">Pretendo</tspan>
				</text>
			</g>
		</svg>

        <div class="mii-img-wrapper">
            <img id="mii-img" draggable="false" />
            <div class="shadow"></div>
        </div>

        <div class="params-wrapper">
            <div class="tabs">
                <button class="tabbtn active" id="faceTypeButton">
                    face
                </button>
                <button class="tabbtn" id="hairTypeButton">
                    hair
                </button>
                <button class="tabbtn" id="eyebrowTypeButton">
                    eyebrow
                </button>
                <button class="tabbtn" id="eyeTypeButton">
                    eye
                </button>
                <button class="tabbtn" id="noseTypeButton">
                    nose
                </button>
                <button class="tabbtn" id="mouthTypeButton">
                    mouth
                </button>
                <button class="tabbtn" id="glassesTypeButton">
                    glasses
                </button>
                <button class="tabbtn" id="facialHairTypeButton">
                    facialHair
                </button>
                <button class="tabbtn" id="moleEnableButton">
                    mole
                </button>
                <button class="tabbtn" id="sizeButton">
                    size
                </button>
                <button class="tabbtn" id="miiscButton">
                    miisc
                </button>
            </div>
        <form class="params"> 
            <div class="tab active" id="faceTypeTab">
                <div class="subtabs">
                    <button class="subtabbtn active" id="faceTypeSubButton">
                        faceType
                    </button>
                    <button class="subtabbtn" id="faceMakeupSubButton">
                        faceMakeup
                    </button>
                    <button class="subtabbtn" id="faceWrinklesSubButton">
                        faceWrinkles
                    </button>
                </div>

                    <fieldset class="subtab active" id="faceType">
                    {{#each editorToHex.face}}
                            <input type="radio" name="faceType" id="faceType{{this}}" value="{{this}}" />
                            <label for="faceType{{this}}">{{this}}</label>
                    {{/each}}
                    </fieldset>

                    <fieldset id="faceColor" class="color">
                        <input type="radio" name="faceColor" id="faceColor0" value="0" />
                        <label for="faceColor0" style="background: #FFCE98 !important;" ></label>
                        <input type="radio" name="faceColor" id="faceColor1" value="1" />
                        <label for="faceColor1" style="background: #FFBA64 !important;" ></label>
                        <input type="radio" name="faceColor" id="faceColor2" value="2" />
                        <label for="faceColor2" style="background: #FF7C3E !important;" ></label>
                        <input type="radio" name="faceColor" id="faceColor3" value="3" />
                        <label for="faceColor3" style="background: #FFB184 !important;" ></label>
                        <input type="radio" name="faceColor" id="faceColor4" value="4" />
                        <label for="faceColor4" style="background: #CA5326 !important;" ></label>
                        <input type="radio" name="faceColor" id="faceColor5" value="5" />
                        <label for="faceColor5" style="background: #752E17 !important;" ></label>
                    </fieldset>

                    <fieldset id="faceMakeup" class="subtab">
                        <input type="radio" name="faceMakeup" id="faceMakeup0" value="0" />
                        <label for="faceMakeup0">0</label>
                        <input type="radio" name="faceMakeup" id="faceMakeup1" value="1" />
                        <label for="faceMakeup1">1</label>
                        <input type="radio" name="faceMakeup" id="faceMakeup2" value="2" />
                        <label for="faceMakeup2">2</label>
                        <input type="radio" name="faceMakeup" id="faceMakeup3" value="3" />
                        <label for="faceMakeup3">3</label>
                        <input type="radio" name="faceMakeup" id="faceMakeup4" value="4" />
                        <label for="faceMakeup4">4</label>
                        <input type="radio" name="faceMakeup" id="faceMakeup5" value="5" />
                        <label for="faceMakeup5">5</label>
                        <input type="radio" name="faceMakeup" id="faceMakeup6" value="6" />
                        <label for="faceMakeup6">6</label>
                        <input type="radio" name="faceMakeup" id="faceMakeup7" value="7" />
                        <label for="faceMakeup7">7</label>
                        <input type="radio" name="faceMakeup" id="faceMakeup8" value="8" />
                        <label for="faceMakeup8">8</label>
                        <input type="radio" name="faceMakeup" id="faceMakeup9" value="9" />
                        <label for="faceMakeup9">9</label>
                        <input type="radio" name="faceMakeup" id="faceMakeup10" value="10" />
                        <label for="faceMakeup10">10</label>
                        <input type="radio" name="faceMakeup" id="faceMakeup11" value="11" />
                        <label for="faceMakeup11">11</label>
                    </fieldset>

                    <fieldset id="faceWrinkles" class="subtab">
                        <input type="radio" name="faceWrinkles" id="faceWrinkles0" value="0" />
                        <label for="faceWrinkles0">0</label>
                        <input type="radio" name="faceWrinkles" id="faceWrinkles1" value="1" />
                        <label for="faceWrinkles1">1</label>
                        <input type="radio" name="faceWrinkles" id="faceWrinkles2" value="2" />
                        <label for="faceWrinkles2">2</label>
                        <input type="radio" name="faceWrinkles" id="faceWrinkles3" value="3" />
                        <label for="faceWrinkles3">3</label>
                        <input type="radio" name="faceWrinkles" id="faceWrinkles4" value="4" />
                        <label for="faceWrinkles4">4</label>
                        <input type="radio" name="faceWrinkles" id="faceWrinkles5" value="5" />
                        <label for="faceWrinkles5">5</label>
                        <input type="radio" name="faceWrinkles" id="faceWrinkles6" value="6" />
                        <label for="faceWrinkles6">6</label>
                        <input type="radio" name="faceWrinkles" id="faceWrinkles7" value="7" />
                        <label for="faceWrinkles7">7</label>
                        <input type="radio" name="faceWrinkles" id="faceWrinkles8" value="8" />
                        <label for="faceWrinkles8">8</label>
                        <input type="radio" name="faceWrinkles" id="faceWrinkles9" value="9" />
                        <label for="faceWrinkles9">9</label>
                        <input type="radio" name="faceWrinkles" id="faceWrinkles10" value="10" />
                        <label for="faceWrinkles10">10</label>
                        <input type="radio" name="faceWrinkles" id="faceWrinkles11" value="11" />
                        <label for="faceWrinkles11">11</label>
                    </fieldset>

            </div>

            <div class="tab" id="hairTypeTab">
                <fieldset id="hairType" class="has-subpages active">
                    {{#each editorToHex.hairs}}
                    <div class="subpage">
                        {{#each this}}
                            <input type="radio" name="hairType" id="hairType{{this}}" value="{{this}}" />
                            <label for="hairType{{this}}">{{this}}</label>
                        {{/each}}
                        <div class="pagination">
                            <button class="previous page-btn index-{{@index}} {{#if @first }}disabled{{/if}}">
                                <svg xmlns="http://www.w3.org/2000/svg" width="34.875" height="34.875" viewBox="0 0 34.875 34.875">
                                    <path id="Icon_awesome-arrow-alt-circle-right" data-name="Icon awesome-arrow-alt-circle-right" d="M18,.563A17.438,17.438,0,1,0,35.438,18,17.434,17.434,0,0,0,18,.563Zm8.156,20.531H18v4.985a.844.844,0,0,1-1.441.6L8.522,18.6a.836.836,0,0,1,0-1.188l8.037-8.086a.844.844,0,0,1,1.441.6v4.985h8.156A.846.846,0,0,1,27,15.75v4.5A.846.846,0,0,1,26.156,21.094Z" transform="translate(-0.563 -0.563)" fill="#9d6ff3"/>
                                </svg>
                            </button>
                            <span>
                                <span class="current-page-index">{{@index}}</span>
                                 / 11
                            </span>
                            <button class="next page-btn index-{{@index}} {{#if @last }}disabled{{/if}}">
                                <svg xmlns="http://www.w3.org/2000/svg" style="pointer-events: none;"="34.875" height="34.875" viewBox="0 0 34.875 34.875">
                                    <path id="Icon_awesome-arrow-alt-circle-right" data-name="Icon awesome-arrow-alt-circle-right" d="M18,.563A17.438,17.438,0,1,1,.563,18,17.434,17.434,0,0,1,18,.563ZM9.844,21.094H18v4.985a.844.844,0,0,0,1.441.6L27.478,18.6a.836.836,0,0,0,0-1.188L19.441,9.323a.844.844,0,0,0-1.441.6v4.985H9.844A.846.846,0,0,0,9,15.75v4.5A.846.846,0,0,0,9.844,21.094Z" transform="translate(-0.563 -0.563)" fill="#9d6ff3"/>
                                </svg>
                            </button>
                        </div>
                    </div>

                    {{/each}}
                </fieldset>

                <fieldset id="hairColor" class="color">
                    <input type="radio" name="hairColor" id="hairColor0" value="0" />
                    <label for="hairColor0" style="background: #0A0A09 !important;" ></label>
                    <input type="radio" name="hairColor" id="hairColor1" value="1" />
                    <label for="hairColor1" style="background: #562D1B !important;" ></label>
                    <input type="radio" name="hairColor" id="hairColor2" value="2" />
                    <label for="hairColor2" style="background: #772314 !important;" ></label>
                    <input type="radio" name="hairColor" id="hairColor3" value="3" />
                    <label for="hairColor3" style="background: #9C481E !important;" ></label>
                    <input type="radio" name="hairColor" id="hairColor4" value="4" />
                    <label for="hairColor4" style="background: #988B8D !important;" ></label>
                    <input type="radio" name="hairColor" id="hairColor5" value="5" />
                    <label for="hairColor5" style="background: #664C1A !important;" ></label>
                    <input type="radio" name="hairColor" id="hairColor6" value="6" />
                    <label for="hairColor6" style="background: #AA6822 !important;" ></label>
                    <input type="radio" name="hairColor" id="hairColor7" value="7" />
                    <label for="hairColor7" style="background: #FEB454 !important;" ></label>
                </fieldset>
            </div>

            <div class="tab" id="eyebrowTypeTab">
                 <div class="subtabs">
                    <button class="subtabbtn active" id="eyebrowTypeSubButton">
                        eyebrowType
                    </button>
                    <button class="subtabbtn" id="eyebrowPositionSubButton">
                        eyebrowPosition
                    </button>
                </div>
                <fieldset id="eyebrowType" class="subtab has-subpages active">
                    {{#each editorToHex.eyebrows}}
                        <div class="subpage">
                        {{#each this}}
                            <input type="radio" name="eyebrowType" id="eyebrowType{{this}}" value="{{this}}" />
                            <label for="eyebrowType{{this}}">{{this}}</label>
                        {{/each}}
                        <div class="pagination">
                            <button class="previous page-btn index-{{@index}} {{#if @first }}disabled{{/if}}">
                                <svg xmlns="http://www.w3.org/2000/svg" width="34.875" height="34.875" viewBox="0 0 34.875 34.875">
                                    <path id="Icon_awesome-arrow-alt-circle-right" data-name="Icon awesome-arrow-alt-circle-right" d="M18,.563A17.438,17.438,0,1,0,35.438,18,17.434,17.434,0,0,0,18,.563Zm8.156,20.531H18v4.985a.844.844,0,0,1-1.441.6L8.522,18.6a.836.836,0,0,1,0-1.188l8.037-8.086a.844.844,0,0,1,1.441.6v4.985h8.156A.846.846,0,0,1,27,15.75v4.5A.846.846,0,0,1,26.156,21.094Z" transform="translate(-0.563 -0.563)" fill="#9d6ff3"/>
                                </svg>
                            </button>
                            <span class="current-page-index">{{@index}}</span> / 2
                            <button class="next page-btn index-{{@index}} {{#if @last }}disabled{{/if}}">
                                <svg xmlns="http://www.w3.org/2000/svg" style="pointer-events: none;"="34.875" height="34.875" viewBox="0 0 34.875 34.875">
                                    <path id="Icon_awesome-arrow-alt-circle-right" data-name="Icon awesome-arrow-alt-circle-right" d="M18,.563A17.438,17.438,0,1,1,.563,18,17.434,17.434,0,0,1,18,.563ZM9.844,21.094H18v4.985a.844.844,0,0,0,1.441.6L27.478,18.6a.836.836,0,0,0,0-1.188L19.441,9.323a.844.844,0,0,0-1.441.6v4.985H9.844A.846.846,0,0,0,9,15.75v4.5A.846.846,0,0,0,9.844,21.094Z" transform="translate(-0.563 -0.563)" fill="#9d6ff3"/>
                                </svg>
                            </button>
                        </div>
                    </div>
                    {{/each}}
                </fieldset>

               <fieldset id="eyebrowPosition" class="subtab has-sliders">
                    <input type="range" class="invert" name="eyebrowVertical" id="eyebrowVertical" min="3" max="18" />
                    <label for="eyebrowVertical">eyebrowVertical</label>
                    <input type="range" name="eyebrowHorizontal" id="eyebrowHorizontal" min="0" max="12" />
                    <label for="eyebrowHorizontal">eyebrowHorizontal</label>
                    <input type="range" name="eyebrowRotation" id="eyebrowRotation" min="0" max="11" />
                    <label for="eyebrowRotation">eyebrowRotation</label>
                    <input type="range" name="eyebrowSize" id="eyebrowSize" min="0" max="8" />
                    <label for="eyebrowSize">eyebrowSize</label>
                    <input type="range" name="eyebrowStretch" id="eyebrowStretch" min="0" max="6" />
                    <label for="eyebrowStretch">eyebrowStretch</label>
                </fieldset>

                <fieldset id="eyebrowColor" class="color">
                    <input type="radio" name="eyebrowColor" id="eyebrowColor0" value="0" />
                    <label for="eyebrowColor0" style="background: #0A0A09 !important;" ></label>
                    <input type="radio" name="eyebrowColor" id="eyebrowColor1" value="1" />
                    <label for="eyebrowColor1" style="background: #562D1B !important;" ></label>
                    <input type="radio" name="eyebrowColor" id="eyebrowColor2" value="2" />
                    <label for="eyebrowColor2" style="background: #772314 !important;" ></label>
                    <input type="radio" name="eyebrowColor" id="eyebrowColor3" value="3" />
                    <label for="eyebrowColor3" style="background: #9C481E !important;" ></label>
                    <input type="radio" name="eyebrowColor" id="eyebrowColor4" value="4" />
                    <label for="eyebrowColor4" style="background: #988B8D !important;" ></label>
                    <input type="radio" name="eyebrowColor" id="eyebrowColor5" value="5" />
                    <label for="eyebrowColor5" style="background: #664C1A !important;" ></label>
                    <input type="radio" name="eyebrowColor" id="eyebrowColor6" value="6" />
                    <label for="eyebrowColor6" style="background: #AA6822 !important;" ></label>
                    <input type="radio" name="eyebrowColor" id="eyebrowColor7" value="7" />
                    <label for="eyebrowColor7" style="background: #FEB454 !important;" ></label>
                </fieldset>
            </div>

            <div class="tab" id="eyeTypeTab">
                <div class="subtabs">
                    <button class="subtabbtn active" id="eyeTypeSubButton">
                        eyeType
                    </button>
                    <button class="subtabbtn" id="eyePositionSubButton">
                        eyePosition
                    </button>
                </div>
                <fieldset id="eyeType" class="subtab has-subpages active">
                    {{#each editorToHex.eyes}}
                        <div class="subpage">
                        {{#each this}}
                            <input type="radio" name="eyeType" id="eyeType{{this}}" value="{{this}}" />
                            <label for="eyeType{{this}}">{{this}}</label>
                        {{/each}}
                        <div class="pagination">
                            <button class="previous page-btn index-{{@index}} {{#if @first }}disabled{{/if}}">
                                <svg xmlns="http://www.w3.org/2000/svg" width="34.875" height="34.875" viewBox="0 0 34.875 34.875">
                                    <path id="Icon_awesome-arrow-alt-circle-right" data-name="Icon awesome-arrow-alt-circle-right" d="M18,.563A17.438,17.438,0,1,0,35.438,18,17.434,17.434,0,0,0,18,.563Zm8.156,20.531H18v4.985a.844.844,0,0,1-1.441.6L8.522,18.6a.836.836,0,0,1,0-1.188l8.037-8.086a.844.844,0,0,1,1.441.6v4.985h8.156A.846.846,0,0,1,27,15.75v4.5A.846.846,0,0,1,26.156,21.094Z" transform="translate(-0.563 -0.563)" fill="#9d6ff3"/>
                                </svg>
                            </button>
                            <span class="current-page-index">{{@index}}</span> / 5
                            <button class="next page-btn index-{{@index}} {{#if @last }}disabled{{/if}}">
                                <svg xmlns="http://www.w3.org/2000/svg" style="pointer-events: none;"="34.875" height="34.875" viewBox="0 0 34.875 34.875">
                                    <path id="Icon_awesome-arrow-alt-circle-right" data-name="Icon awesome-arrow-alt-circle-right" d="M18,.563A17.438,17.438,0,1,1,.563,18,17.434,17.434,0,0,1,18,.563ZM9.844,21.094H18v4.985a.844.844,0,0,0,1.441.6L27.478,18.6a.836.836,0,0,0,0-1.188L19.441,9.323a.844.844,0,0,0-1.441.6v4.985H9.844A.846.846,0,0,0,9,15.75v4.5A.846.846,0,0,0,9.844,21.094Z" transform="translate(-0.563 -0.563)" fill="#9d6ff3"/>
                                </svg>
                            </button>
                        </div>
                    </div>
                    {{/each}}
                </fieldset>

                <fieldset id="eyeColor" class="color">
                    <input type="radio" name="eyeColor" id="eyeColor0" value="0" />
                    <label for="eyeColor0" style="background: #070606 !important;" ></label>
                    <input type="radio" name="eyeColor" id="eyeColor1" value="1" />
                    <label for="eyeColor1" style="background: #887E75 !important;" ></label>
                    <input type="radio" name="eyeColor" id="eyeColor2" value="2" />
                    <label for="eyeColor2" style="background: #814631 !important;" ></label>
                    <input type="radio" name="eyeColor" id="eyeColor3" value="3" />
                    <label for="eyeColor3" style="background: #796A34 !important;" ></label>
                    <input type="radio" name="eyeColor" id="eyeColor4" value="4" />
                    <label for="eyeColor4" style="background: #565BA4 !important;" ></label>
                    <input type="radio" name="eyeColor" id="eyeColor5" value="5" />
                    <label for="eyeColor5" style="background: #4C8260 !important;" ></label>
                </fieldset>

               <fieldset id="eyePosition" class="subtab has-sliders">
                    <input type="range" class="invert" name="eyeVertical" id="eyeVertical" min="0" max="18" />
                    <label for="eyeVertical">eyeVertical</label>
                    <input type="range" name="eyeHorizontal" id="eyeHorizontal" min="0" max="12" />
                    <label for="eyeHorizontal">eyeHorizontal</label>
                    <input type="range" name="eyeRotation" id="eyeRotation" min="0" max="7" />
                    <label for="eyeRotation">eyeRotation</label>
                    <input type="range" name="eyeSize" id="eyeSize" min="0" max="7" />
                    <label for="eyeSize">eyeSize</label>
                    <input type="range" name="eyeStretch" id="eyeStretch" min="0" max="6" />
                    <label for="eyeStretch">eyeStretch</label>
                </fieldset>
            </div>

            <div class="tab" id="noseTypeTab">
                <div class="subtabs">
                    <button class="subtabbtn active" id="noseTypeSubButton">
                        noseType
                    </button>
                    <button class="subtabbtn" id="nosePositionSubButton">
                        nosePosition
                    </button>
                </div>
                <fieldset id="noseType" class="subtab has-subpages active">
                    {{#each editorToHex.nose}}
                        <div class="subpage">
                        {{#each this}}
                            <input type="radio" name="noseType" id="noseType{{this}}" value="{{this}}" />
                            <label for="noseType{{this}}">{{this}}</label>
                        {{/each}}
                        <div class="pagination">
                            <button class="previous page-btn index-{{@index}} {{#if @first }}disabled{{/if}}">
                                <svg xmlns="http://www.w3.org/2000/svg" width="34.875" height="34.875" viewBox="0 0 34.875 34.875">
                                    <path id="Icon_awesome-arrow-alt-circle-right" data-name="Icon awesome-arrow-alt-circle-right" d="M18,.563A17.438,17.438,0,1,0,35.438,18,17.434,17.434,0,0,0,18,.563Zm8.156,20.531H18v4.985a.844.844,0,0,1-1.441.6L8.522,18.6a.836.836,0,0,1,0-1.188l8.037-8.086a.844.844,0,0,1,1.441.6v4.985h8.156A.846.846,0,0,1,27,15.75v4.5A.846.846,0,0,1,26.156,21.094Z" transform="translate(-0.563 -0.563)" fill="#9d6ff3"/>
                                </svg>
                            </button>
                            <span class="current-page-index">{{@index}}</span> / 2
                            <button class="next page-btn index-{{@index}} {{#if @last }}disabled{{/if}}">
                                <svg xmlns="http://www.w3.org/2000/svg" style="pointer-events: none;"="34.875" height="34.875" viewBox="0 0 34.875 34.875">
                                    <path id="Icon_awesome-arrow-alt-circle-right" data-name="Icon awesome-arrow-alt-circle-right" d="M18,.563A17.438,17.438,0,1,1,.563,18,17.434,17.434,0,0,1,18,.563ZM9.844,21.094H18v4.985a.844.844,0,0,0,1.441.6L27.478,18.6a.836.836,0,0,0,0-1.188L19.441,9.323a.844.844,0,0,0-1.441.6v4.985H9.844A.846.846,0,0,0,9,15.75v4.5A.846.846,0,0,0,9.844,21.094Z" transform="translate(-0.563 -0.563)" fill="#9d6ff3"/>
                                </svg>
                            </button>
                        </div>
                    </div>
                    {{/each}}
                </fieldset>

                <fieldset id="nosePosition" class="subtab has-sliders">
                    <input type="range" class="invert" name="noseVertical" id="noseVertical" min="0" max="18" />
                    <label for="noseVertical">noseVertical</label>
                    <input type="range" name="noseSize" id="noseSize" min="0" max="8" />
                    <label for="noseSize">noseSize</label>
                </fieldset>
            </div>

            <div class="tab" id="mouthTypeTab">
                <div class="subtabs">
                    <button class="subtabbtn active" id="mouthTypeSubButton">
                        mouthType
                    </button>
                    <button class="subtabbtn" id="mouthPositionSubButton">
                        mouthPosition
                    </button>
                </div>
                <fieldset id="mouthType" class="subtab has-subpages active">
                    {{#each editorToHex.mouth}}
                        <div class="subpage">
                        {{#each this}}
                            <input type="radio" name="mouthType" id="mouthType{{this}}" value="{{this}}" />
                            <label for="mouthType{{this}}">{{this}}</label>
                        {{/each}}
                        <div class="pagination">
                            <button class="previous page-btn index-{{@index}} {{#if @first }}disabled{{/if}}">
                                <svg xmlns="http://www.w3.org/2000/svg" width="34.875" height="34.875" viewBox="0 0 34.875 34.875">
                                    <path id="Icon_awesome-arrow-alt-circle-right" data-name="Icon awesome-arrow-alt-circle-right" d="M18,.563A17.438,17.438,0,1,0,35.438,18,17.434,17.434,0,0,0,18,.563Zm8.156,20.531H18v4.985a.844.844,0,0,1-1.441.6L8.522,18.6a.836.836,0,0,1,0-1.188l8.037-8.086a.844.844,0,0,1,1.441.6v4.985h8.156A.846.846,0,0,1,27,15.75v4.5A.846.846,0,0,1,26.156,21.094Z" transform="translate(-0.563 -0.563)" fill="#9d6ff3"/>
                                </svg>
                            </button>
                            <span class="current-page-index">{{@index}}</span> / 3
                            <button class="next page-btn index-{{@index}} {{#if @last }}disabled{{/if}}">
                                <svg xmlns="http://www.w3.org/2000/svg" style="pointer-events: none;"="34.875" height="34.875" viewBox="0 0 34.875 34.875">
                                    <path id="Icon_awesome-arrow-alt-circle-right" data-name="Icon awesome-arrow-alt-circle-right" d="M18,.563A17.438,17.438,0,1,1,.563,18,17.434,17.434,0,0,1,18,.563ZM9.844,21.094H18v4.985a.844.844,0,0,0,1.441.6L27.478,18.6a.836.836,0,0,0,0-1.188L19.441,9.323a.844.844,0,0,0-1.441.6v4.985H9.844A.846.846,0,0,0,9,15.75v4.5A.846.846,0,0,0,9.844,21.094Z" transform="translate(-0.563 -0.563)" fill="#9d6ff3"/>
                                </svg>
                            </button>
                        </div>
                    </div>
                    {{/each}}
                </fieldset>

                <fieldset id="mouthColor" class="color">
                    <input type="radio" name="mouthColor" id="mouthColor0" value="0" />
                    <label for="mouthColor0" style="background: #FF5D0C !important;" ></label>
                    <input type="radio" name="mouthColor" id="mouthColor1" value="1" />
                    <label for="mouthColor1" style="background: #FF110C !important;" ></label>
                    <input type="radio" name="mouthColor" id="mouthColor2" value="2" />
                    <label for="mouthColor2" style="background: #FF524B !important;" ></label>
                    <input type="radio" name="mouthColor" id="mouthColor3" value="3" />
                    <label for="mouthColor3" style="background: #FFAA77 !important;" ></label>
                    <input type="radio" name="mouthColor" id="mouthColor4" value="4" />
                    <label for="mouthColor4" style="background: #181312 !important;" ></label>
                </fieldset>

                <fieldset id="mouthPosition" class="subtab has-sliders">
                    <input type="range" class="invert" name="mouthVertical" id="mouthVertical" min="0" max="18" />
                    <label for="mouthVertical">mouthVertical</label>
                    <input type="range" name="mouthSize" id="mouthSize" min="0" max="8" />
                    <label for="mouthSize">mouthSize</label>
                </fieldset>
            </div>

            <div class="tab" id="glassesTypeTab">
                <div class="subtabs">
                    <button class="subtabbtn active" id="glassesTypeSubButton">
                        glassesType
                    </button>
                    <button class="subtabbtn" id="glassesPositionSubButton">
                        glassesPosition
                    </button>
                </div>
                <fieldset id="glassesType" class="subtab active">
                    <input type="radio" name="glassesType" id="glassesType0" value="0" />
                    <label for="glassesType0">0</label>
                    <input type="radio" name="glassesType" id="glassesType1" value="1" />
                    <label for="glassesType1">1</label>
                    <input type="radio" name="glassesType" id="glassesType2" value="2" />
                    <label for="glassesType2">2</label>
                    <input type="radio" name="glassesType" id="glassesType3" value="3" />
                    <label for="glassesType3">3</label>
                    <input type="radio" name="glassesType" id="glassesType4" value="4" />
                    <label for="glassesType4">4</label>
                    <input type="radio" name="glassesType" id="glassesType5" value="5" />
                    <label for="glassesType5">5</label>
                    <input type="radio" name="glassesType" id="glassesType6" value="6" />
                    <label for="glassesType6">6</label>
                    <input type="radio" name="glassesType" id="glassesType7" value="7" />
                    <label for="glassesType7">7</label>
                    <input type="radio" name="glassesType" id="glassesType8" value="8" />
                    <label for="glassesType8">8</label>
                </fieldset>

                <fieldset id="glassesColor" class="color">
                    <input type="radio" name="glassesColor" id="glassesColor0" value="0" />
                    <label for="glassesColor0" style="background: #000000 !important;" ></label>
                    <input type="radio" name="glassesColor" id="glassesColor1" value="1" />
                    <label for="glassesColor1" style="background: #7A4011 !important;" ></label>
                    <input type="radio" name="glassesColor" id="glassesColor2" value="2" />
                    <label for="glassesColor2" style="background: #D51208 !important;" ></label>
                    <input type="radio" name="glassesColor" id="glassesColor3" value="3" />
                    <label for="glassesColor3" style="background: #29376E !important;" ></label>
                    <input type="radio" name="glassesColor" id="glassesColor4" value="4" />
                    <label for="glassesColor4" style="background: #D56D00 !important;" ></label>
                    <input type="radio" name="glassesColor" id="glassesColor5" value="5" />
                    <label for="glassesColor5" style="background: #987F6E !important;" ></label>
                </fieldset>

                <fieldset id="glassesPosition" class="subtab has-sliders">
                    <input type="range" class="invert" name="glassesVertical" id="glassesVertical" min="0" max="20" />
                    <label for="glassesVertical">glassesVertical</label>
                    <input type="range" name="glassesSize" id="glassesSize" min="0" max="7" />
                    <label for="glassesSize">glassesSize</label>
                </fieldset>
            </div>

            <div class="tab" id="facialHairTypeTab">
                <div class="subtabs">
                    <button class="subtabbtn active" id="facialHairTypeSubButton">
                        facialHairType
                    </button>
                    <button class="subtabbtn" id="facialHairMustacheSubButton">
                        facialHairMustache
                    </button>
                    <button class="subtabbtn" id="facialHairPositionSubButton">
                        facialHairPosition
                    </button>
                </div>
                <fieldset id="facialHairType" class="subtab active">
                    <input type="radio" name="facialHairType" id="facialHairType0" value="0" />
                    <label for="facialHairType0">0</label>
                    <input type="radio" name="facialHairType" id="facialHairType1" value="1" />
                    <label for="facialHairType1">1</label>
                    <input type="radio" name="facialHairType" id="facialHairType2" value="2" />
                    <label for="facialHairType2">2</label>
                    <input type="radio" name="facialHairType" id="facialHairType3" value="3" />
                    <label for="facialHairType3">3</label>
                    <input type="radio" name="facialHairType" id="facialHairType4" value="4" />
                    <label for="facialHairType4">4</label>
                    <input type="radio" name="facialHairType" id="facialHairType5" value="5" />
                    <label for="facialHairType5">5</label>
                </fieldset>

                <fieldset id="facialHairColor" class="color">
                    <input type="radio" name="facialHairColor" id="facialHairColor0" value="0" />
                    <label for="facialHairColor0" style="background: #0A0A09 !important;" ></label>
                    <input type="radio" name="facialHairColor" id="facialHairColor1" value="1" />
                    <label for="facialHairColor1" style="background: #562D1B !important;" ></label>
                    <input type="radio" name="facialHairColor" id="facialHairColor2" value="2" />
                    <label for="facialHairColor2" style="background: #772314 !important;" ></label>
                    <input type="radio" name="facialHairColor" id="facialHairColor3" value="3" />
                    <label for="facialHairColor3" style="background: #9C481E !important;" ></label>
                    <input type="radio" name="facialHairColor" id="facialHairColor4" value="4" />
                    <label for="facialHairColor4" style="background: #988B8D !important;" ></label>
                    <input type="radio" name="facialHairColor" id="facialHairColor5" value="5" />
                    <label for="facialHairColor5" style="background: #664C1A !important;" ></label>
                    <input type="radio" name="facialHairColor" id="facialHairColor6" value="6" />
                    <label for="facialHairColor6" style="background: #AA6822 !important;" ></label>
                    <input type="radio" name="facialHairColor" id="facialHairColor7" value="7" />
                    <label for="facialHairColor7" style="background: #FEB454 !important;" ></label>
                </fieldset>

                <fieldset id="facialHairMustache" class="subtab">
                    <input type="radio" name="facialHairMustache" id="facialHairMustache0" value="0" />
                    <label for="facialHairMustache0">0</label>
                    <input type="radio" name="facialHairMustache" id="facialHairMustache1" value="1" />
                    <label for="facialHairMustache1">1</label>
                    <input type="radio" name="facialHairMustache" id="facialHairMustache2" value="2" />
                    <label for="facialHairMustache2">2</label>
                    <input type="radio" name="facialHairMustache" id="facialHairMustache3" value="3" />
                    <label for="facialHairMustache3">3</label>
                    <input type="radio" name="facialHairMustache" id="facialHairMustache4" value="4" />
                    <label for="facialHairMustache4">4</label>
                    <input type="radio" name="facialHairMustache" id="facialHairMustache5" value="5" />
                    <label for="facialHairMustache5">5</label>
                </fieldset>

                <fieldset id="facialHairPosition" class="subtab has-sliders">
                    <input type="range" class="invert" name="facialHairVertical" id="facialHairVertical" min="0" max="16" />
                    <label for="facialHairVertical">facialHairVertical</label>
                    <input type="range" name="facialHairSize" id="facialHairSize" min="0" max="8" />
                    <label for="facialHairSize">facialHairSize</label>
                </fieldset>
            </div>

            <div class="tab" id="moleEnableTab">
                <div class="subtabs">
                    <button class="subtabbtn active" id="moleEnableSubButton">
                        moleEnable
                    </button>
                    <button class="subtabbtn" id="molePositionSubButton">
                        moleEnablePosition
                    </button>
                </div>
                <fieldset id="moleEnable" class="subtab active">
                    <input type="radio" name="moleEnable" id="moleEnable0" value="0" />
                    <label for="moleEnable0">0</label>
                    <input type="radio" name="moleEnable" id="moleEnable1" value="1" />
                    <label for="moleEnable1">1</label>
                </fieldset>

               <fieldset id="molePosition" class="subtab has-sliders">
                    <input type="range" class="invert" name="moleVertical" id="moleVertical" min="0" max="30" />
                    <label for="moleVertical">moleVertical</label>
                    <input type="range" name="moleHorizontal" id="moleHorizontal" min="0" max="16" />
                    <label for="moleHorizontal">moleHorizontal</label>
                    <input type="range" name="moleSize" id="moleSize" min="0" max="8" />
                    <label for="moleSize">moleSize</label>
                </fieldset>
            </div>

            <div class="tab" id="sizeTab">
               <fieldset id="size" class="active has-sliders">
                    <input type="range" name="height" id="height" min="0" max="127" />
                    <label for="height">height</label>
                    <input type="range" name="build" id="build" min="0" max="127" />
                    <label for="build">build</label>
                </fieldset>
            </div>

            <div class="tab" id="miiscTab"><!--Get it it's funny 'cause 'mii' and 'misc'-->
                <div class="subtabs">
                    <button class="subtabbtn active" id="genderSubButton">
                        dress
                    </button>
                    <button class="subtabbtn" id="favoriteColorSubButton">
                        favcolor
                    </button>
                </div>
                <fieldset id="gender" class="subtab active">
                    <input type="radio" name="gender" id="gender0" value="0" />
                    <label for="gender0">0</label>
                    <input type="radio" name="gender" id="gender1" value="1" />
                    <label for="gender1">1</label>
                </fieldset>

                <fieldset id="favoriteColor" class="subtab">
                    <input type="radio" name="favoriteColor" id="favoriteColor0" value="0" />
                    <label for="favoriteColor0" style="background: #FF2216 !important;" ></label>
                    <input type="radio" name="favoriteColor" id="favoriteColor1" value="1" />
                    <label for="favoriteColor1" style="background: #FF7A1A !important;" ></label>
                    <input type="radio" name="favoriteColor" id="favoriteColor2" value="2" />
                    <label for="favoriteColor2" style="background: #FFED22 !important;" ></label>
                    <input type="radio" name="favoriteColor" id="favoriteColor3" value="3" />
                    <label for="favoriteColor3" style="background: #91F321 !important;" ></label>
                    <input type="radio" name="favoriteColor" id="favoriteColor4" value="4" />
                    <label for="favoriteColor4" style="background: #008332 !important;" ></label>
                    <input type="radio" name="favoriteColor" id="favoriteColor5" value="5" />
                    <label for="favoriteColor5" style="background: #0D50BE !important;" ></label>
                    <input type="radio" name="favoriteColor" id="favoriteColor6" value="6" />
                    <label for="favoriteColor6" style="background: #49BBE4 !important;" ></label>
                    <input type="radio" name="favoriteColor" id="favoriteColor7" value="7" />
                    <label for="favoriteColor7" style="background: #FF6381 !important;" ></label>
                    <input type="radio" name="favoriteColor" id="favoriteColor8" value="8" />
                    <label for="favoriteColor8" style="background: #8B2DB2 !important;" ></label>
                    <input type="radio" name="favoriteColor" id="favoriteColor9" value="9" />
                    <label for="favoriteColor9" style="background: #573D18 !important;" ></label>
                    <input type="radio" name="favoriteColor" id="favoriteColor10" value="10" />
                    <label for="favoriteColor10" style="background: #FFFFFF !important;" ></label>
                    <input type="radio" name="favoriteColor" id="favoriteColor11" value="11" />
                    <label for="favoriteColor11" style="background: #1D1A15 !important;" ></label>
                </fieldset>
            </div>
        </form>
        </div>
    </div>

<script id="encodedUserMiiData" type="text/plain">
  {{encodedUserMiiData}}
</script>
<script src="/assets/js/miieditor.bundled.js"></script>