{{#section 'head'}}
	<link rel="stylesheet" href="/assets/css/miieditor.css" />
{{/section}}
	<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="canvas-wrapper">
			<canvas id="miiCanvas" width="512" height="1080">
				Your browser does not support the canvas element.
			</canvas>
		</div>

		<div class="params-wrapper">
			<div class="tabs">
				<button class="tabbtn active" id="faceTypeButton" style="--assetcol: 0"></button>
				<button class="tabbtn" id="hairTypeButton" style="--assetcol: 1"></button>
				<button class="tabbtn" id="eyebrowTypeButton" style="--assetcol: 2"></button>
				<button class="tabbtn" id="eyeTypeButton" style="--assetcol: 3"></button>
				<button class="tabbtn" id="noseTypeButton" style="--assetcol: 4"></button>
				<button class="tabbtn" id="mouthTypeButton" style="--assetcol: 5"></button>
				<button class="tabbtn" id="glassesTypeButton" style="--assetcol: 6"></button>
				<button class="tabbtn" id="beardTypeButton"style="--assetcol: 7"></button>
				<button class="tabbtn" id="moleEnabledButton" style="--assetcol: 8"></button>
				<button class="tabbtn" id="miiscButton" style="--assetcol: 9"></button>
				<button class="tabbtn" id="saveButton" style="--assetcol: 10"></button>
			</div>
		<form class="params">
			<div class="tab active" id="faceTypeTab">
				<div class="subtabs">
					<button class="subtabbtn active" id="faceTypeSubButton" style="--assetcol: 0"></button>
					<button class="subtabbtn" id="makeupTypeSubButton" style="--assetcol: 1"></button>
					<button class="subtabbtn" id="wrinklesTypeSubButton" style="--assetcol: 2"></button>
					<button class="subtabbtn" id="skinColorSubButton" style="--assetcol: 12"></button>
				</div>

					<fieldset class="subtab active" id="faceType" style="--assetrow: 0">
					{{#each editorJSON.face}}
							<input type="radio" name="faceType" id="faceType{{this}}" value="{{this}}" />
							<label for="faceType{{this}}" style="--assetcol: {{@key}}"></label>
					{{/each}}
					</fieldset>

					<fieldset id="skinColor" class="subtab color">
						<input type="radio" name="skinColor" id="skinColor0" value="0" />
						<label for="skinColor0" style="background: #FFCE98 !important;" ></label>
						<input type="radio" name="skinColor" id="skinColor1" value="1" />
						<label for="skinColor1" style="background: #FFBA64 !important;" ></label>
						<input type="radio" name="skinColor" id="skinColor2" value="2" />
						<label for="skinColor2" style="background: #FF7C3E !important;" ></label>
						<input type="radio" name="skinColor" id="skinColor3" value="3" />
						<label for="skinColor3" style="background: #FFB184 !important;" ></label>
						<input type="radio" name="skinColor" id="skinColor4" value="4" />
						<label for="skinColor4" style="background: #CA5326 !important;" ></label>
						<input type="radio" name="skinColor" id="skinColor5" value="5" />
						<label for="skinColor5" style="background: #752E17 !important;" ></label>
					</fieldset>

					<fieldset id="makeupType" class="subtab" style="--assetrow: 1">
						{{#each editorJSON.arrayOf12}}
							<input type="radio" name="makeupType" id="makeupType{{this}}" value="{{this}}" />
							<label for="makeupType{{this}}" style="--assetcol: {{@key}}"></label>
						{{/each}}
					</fieldset>

					<fieldset id="wrinklesType" class="subtab" style="--assetrow: 2">
						{{#each editorJSON.arrayOf12}}
							<input type="radio" name="wrinklesType" id="wrinklesType{{this}}" value="{{this}}" />
							<label for="wrinklesType{{this}}" style="--assetcol: {{@key}}"></label>
						{{/each}}
					</fieldset>

			</div>

			<div class="tab" id="hairTypeTab" style="--assetrow: 3">
				<div class="subtabs">
					<button class="subtabbtn active" id="hairTypeSubButton" style="--assetcol: 9"></button>
					<button class="subtabbtn" id="hairColorSubButton" style="--assetcol: 12"></button>
				</div>
				<fieldset id="hairType" class="subtab has-subpages active">
					{{#each editorJSON.hairs}}
					<div class="subpage" style="--subpage: {{@key}}">
						{{#each this}}
							<input type="radio" name="hairType" id="hairType{{this}}" value="{{this}}" />
							<label for="hairType{{this}}" style="--assetcol: {{@key}}"></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="subtab 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" style="--assetcol: 3"></button>
					<button class="subtabbtn" id="eyebrowPositionSubButton" style="--assetcol: 13"></button>
					<button class="subtabbtn" id="eyebrowColorSubButton" style="--assetcol: 12"></button>
				</div>
				<fieldset id="eyebrowType" class="subtab has-subpages active" style="--assetrow: 4">
					{{#each editorJSON.eyebrows}}
						<div class="subpage" style="--subpage: {{@key}}">
						{{#each this}}
							<input type="radio" name="eyebrowType" id="eyebrowType{{this}}" value="{{this}}" />
							<label for="eyebrowType{{this}}" style="--assetcol: {{@key}}"><div></div></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">
					<label for="eyebrowYPosition" style="--assetcol: 2"></label>
					<input type="range" list="tickmarks" class="invert" name="eyebrowYPosition" id="eyebrowYPosition" min="3" max="18" />
					<label for="eyebrowSpacing" style="--assetcol: 4"></label>
					<input type="range" list="tickmarks" name="eyebrowSpacing" id="eyebrowSpacing" min="0" max="12" />
					<label for="eyebrowRotation" style="--assetcol: 5"></label>
					<input type="range" list="tickmarks" class="invert" name="eyebrowRotation" id="eyebrowRotation" min="0" max="11" />
					<label for="eyebrowScale" style="--assetcol: 6"></label>
					<input type="range" list="tickmarks" name="eyebrowScale" id="eyebrowScale" min="0" max="8" />
					<label for="eyebrowVerticalStretch" style="--assetcol: 7"></label>
					<input type="range" list="tickmarks" name="eyebrowVerticalStretch" id="eyebrowVerticalStretch" min="0" max="6" />
				</fieldset>

				<fieldset id="eyebrowColor" class="subtab 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" style="--assetcol: 4"></button>
					<button class="subtabbtn" id="eyePositionSubButton" style="--assetcol: 13"></button>
					<button class="subtabbtn" id="eyeColorSubButton" style="--assetcol: 12"></button>
				</div>
				<fieldset id="eyeType" class="subtab has-subpages active" style="--assetrow: 5">
					{{#each editorJSON.eyes}}
						<div class="subpage" style="--subpage: {{@key}}">
						{{#each this}}
							<input type="radio" name="eyeType" id="eyeType{{this}}" value="{{this}}" />
							<label for="eyeType{{this}}" style="--assetcol: {{@key}}"></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="subtab 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">
					<label for="eyeYPosition" style="--assetcol: 2"></label>
					<input type="range" list="tickmarks" class="invert" name="eyeYPosition" id="eyeYPosition" min="0" max="18" />
					<label for="eyeSpacing" style="--assetcol: 4"></label>
					<input type="range" list="tickmarks" name="eyeSpacing" id="eyeSpacing" min="0" max="12" />
					<label for="eyeRotation" style="--assetcol: 5"></label>
					<input type="range" class="invert" list="tickmarks" name="eyeRotation" id="eyeRotation" min="0" max="7" />
					<label for="eyeScale" style="--assetcol: 6"></label>
					<input type="range" list="tickmarks" name="eyeScale" id="eyeScale" min="0" max="7" />
					<label for="eyeVerticalStretch" style="--assetcol: 7"></label>
					<input type="range" list="tickmarks" name="eyeVerticalStretch" id="eyeVerticalStretch" min="0" max="6" />
				</fieldset>
			</div>

			<div class="tab" id="noseTypeTab">
				<div class="subtabs">
					<button class="subtabbtn active" id="noseTypeSubButton" style="--assetcol: 5"></button>
					<button class="subtabbtn" id="nosePositionSubButton" style="--assetcol: 13"></button>
				</div>
				<fieldset id="noseType" class="subtab has-subpages active" style="--assetrow: 6">
					{{#each editorJSON.nose}}
						<div class="subpage" style="--subpage: {{@key}}">
						{{#each this}}
							<input type="radio" name="noseType" id="noseType{{this}}" value="{{this}}" />
							<label for="noseType{{this}}" style="--assetcol: {{@key}}"></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">
					<label for="noseYPosition" style="--assetcol: 2"></label>
					<input type="range" list="tickmarks" class="invert" name="noseYPosition" id="noseYPosition" min="0" max="18" />
					<label for="noseScale" style="--assetcol: 6"></label>
					<input type="range" list="tickmarks" name="noseScale" id="noseScale" min="0" max="8" />

				</fieldset>
			</div>

			<div class="tab" id="mouthTypeTab">
				<div class="subtabs">
					<button class="subtabbtn active" id="mouthTypeSubButton" style="--assetcol: 6"></button>
					<button class="subtabbtn" id="mouthPositionSubButton" style="--assetcol: 13"></button>
					<button class="subtabbtn" id="mouthColorSubButton" style="--assetcol: 12"></button>
				</div>
				<fieldset id="mouthType" class="subtab has-subpages active" style="--assetrow: 7">
					{{#each editorJSON.mouth}}
						<div class="subpage" style="--subpage: {{@key}}">
						{{#each this}}
							<input type="radio" name="mouthType" id="mouthType{{this}}" value="{{this}}" />
							<label for="mouthType{{this}}" style="--assetcol: {{@key}}"></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="subtab 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">
					<label for="mouthYPosition" style="--assetcol: 2"></label>
					<input type="range" list="tickmarks" class="invert" name="mouthYPosition" id="mouthYPosition" min="0" max="18" />
					<label for="mouthScale" style="--assetcol: 6"></label>
					<input type="range" list="tickmarks" name="mouthScale" id="mouthScale" min="0" max="8" />
					<label for="mouthHorizontalStretch" style="--assetcol: 7"></label>
					<input type="range" list="tickmarks" name="mouthHorizontalStretch" id="mouthHorizontalStretch" min="0" max="6" />
				</fieldset>
			</div>

			<div class="tab" id="glassesTypeTab">
				<div class="subtabs">
					<button class="subtabbtn active" id="glassesTypeSubButton" style="--assetcol: 7"></button>
					<button class="subtabbtn" id="glassesPositionSubButton" style="--assetcol: 13"></button>
					<button class="subtabbtn" id="glassesColorSubButton" style="--assetcol: 12"></button>
				</div>
				<fieldset id="glassesType" class="subtab active" style="--assetrow: 8">
					{{#each editorJSON.arrayOf9}}
						<input type="radio" name="glassesType" id="glassesType{{this}}" value="{{this}}" />
						<label for="glassesType{{this}}" style="--assetcol: {{@key}}"></label>
					{{/each}}
				</fieldset>

				<fieldset id="glassesColor" class="subtab 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">
					<label for="glassesYPosition" style="--assetcol: 2"></label>
					<input type="range" list="tickmarks" class="invert" name="glassesYPosition" id="glassesYPosition" min="0" max="20" />
					<label for="glassesScale" style="--assetcol: 6"></label>
					<input type="range" list="tickmarks" name="glassesScale" id="glassesScale" min="0" max="7" />

				</fieldset>
			</div>

			<div class="tab" id="beardTypeTab">
				<div class="subtabs">
					<button class="subtabbtn active" id="beardTypeSubButton" style="--assetcol: 8"></button>
					<button class="subtabbtn" id="mustacheTypeSubButton" style="--assetcol: 9"></button>
					<button class="subtabbtn" id="facialHairPositionSubButton" style="--assetcol: 13"></button>
					<button class="subtabbtn" id="facialHairColorSubButton" style="--assetcol: 12"></button>
				</div>
				<fieldset id="beardType" class="subtab active" style="--assetrow: 9">
					{{#each editorJSON.arrayOf6}}
						<input type="radio" name="beardType" id="beardType{{this}}" value="{{this}}" />
						<label for="beardType{{this}}" style="--assetcol: {{@key}}"></label>
					{{/each}}
				</fieldset>

				<fieldset id="facialHairColor" class="subtab 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="mustacheType" class="subtab active" style="--assetrow: 10">
					{{#each editorJSON.arrayOf6}}
						<input type="radio" name="mustacheType" id="mustacheType{{this}}" value="{{this}}" />
						<label for="mustacheType{{this}}" style="--assetcol: {{@key}}"></label>
					{{/each}}
				</fieldset>

				<fieldset id="facialHairPosition" class="subtab has-sliders">
					<label for="mustacheYPosition" style="--assetcol: 2"></label>
					<input type="range" list="tickmarks" class="invert" name="mustacheYPosition" id="mustacheYPosition" min="0" max="16" />
					<label for="mustacheScale" style="--assetcol: 6"></label>
					<input type="range" list="tickmarks" name="mustacheScale" id="mustacheScale" min="0" max="8" />
				</fieldset>
			</div>

			<div class="tab" id="moleEnabledTab">
				<div class="subtabs">
					<button class="subtabbtn active" id="moleEnabledSubButton" style="--assetcol: 10"></button>
					<button class="subtabbtn" id="molePositionSubButton" style="--assetcol: 13"></button>
				</div>
				<fieldset id="moleEnabled" class="subtab active" style="--assetrow: 11">
					<input type="radio" name="moleEnabled" id="moleEnabledfalse" value="false" />
					<label for="moleEnabledfalse" style="--assetcol: 0"></label>
					<input type="radio" name="moleEnabled" id="moleEnabledtrue" value="true" />
					<label for="moleEnabledtrue" style="--assetcol: 1"></label>
				</fieldset>

				<fieldset id="molePosition" class="subtab has-sliders">
					<label for="moleYPosition" style="--assetcol: 2"></label>
					<input type="range" list="tickmarks" class="invert" name="moleYPosition" id="moleYPosition" min="0" max="30" />
					<label for="moleXPosition" style="--assetcol: 3"></label>
					<input type="range" list="tickmarks" name="moleXPosition" id="moleXPosition" min="0" max="16" />
					<label for="moleScale" style="--assetcol: 6"></label>
					<input type="range" list="tickmarks" name="moleScale" id="moleScale" min="0" max="8" />
				</fieldset>
			</div>

			<div class="tab" id="miiscTab"><!--Get it it's funny 'cause 'mii' and 'misc'-->
				<div class="subtabs">
					<button class="subtabbtn active" id="sizeSubButton" style="--assetcol: 14"></button>
					<button class="subtabbtn" id="genderSubButton" style="--assetcol: 11"></button>
					<button class="subtabbtn" id="favoriteColorSubButton" style="--assetcol: 12"></button>
					<button class="subtabbtn" id="infoSubButton" style="--assetcol: 15"></button>
				</div>

				<fieldset id="size" class="subtab active has-sliders">
					<label for="height" style="--assetcol: 0"></label>
					<input type="range" list="tickmarks" name="height" id="height" min="0" max="127" />
					<label for="build" style="--assetcol: 1"></label>
					<input type="range" list="tickmarks" name="build" id="build" min="0" max="127" />
				</fieldset>

				<fieldset id="gender" class="subtab" style="--assetrow: 12">
					<input type="radio" name="gender" id="gender0" value="0" />
					<label for="gender0" style="--assetcol: 0"></label>
					<input type="radio" name="gender" id="gender1" value="1" />
					<label for="gender1" style="--assetcol: 1"></label>
				</fieldset>

				<fieldset id="info" class="subtab active has-textinput">
					<div>
						<label for="miiName">Nickname</label>
						<input type="text" name="miiName" id="miiName" minLength="1" maxLength="10" />
					</div>
					<div>
						<label for="creatorName">Creator</label>
						<input type="text" name="creatorName" id="creatorName" minLength="1" maxLength="10" />
					</div>
					<div>
						<label for="birthDate">Birthday</label>
						<input type="date" name="birthDate" id="birthDate" min="2024-01-01" max="2024-12-31"/>
					</div>
					<div class="icons">
						<div>
							<label for="favorite">Favorite</label>
							<input type="checkbox" name="favorite" id="favorite" />
						</div>
						<div>
							<label for="disableSharing">Sharing</label>
							<input type="checkbox" name="disableSharing" id="disableSharing"  />
						</div>
						<div>
							<label for="allowCopying">Copying</label>
							<input type="checkbox" name="allowCopying" id="allowCopying" />
						</div>
					</div>
				</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>

			<div class="tab" id="saveTab">
				<p class="save-prompt">Save Mii? This will permanently overwrite your current Mii.</p>
				<div class="mii-comparison-animation-wrapper">
					<div class="mii-comparison unconfirmed">
						<img class="old-mii" src=""></img>
						<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--mdi" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="#888888" d="M4 15V9h8V4.16L19.84 12L12 19.84V15H4Z"></path></svg>
						<div class="new-mii-wrapper">
							<img class="new-mii" src=""></img>
						</div>
					</div>
					<div class="mii-comparison confirmed">
						<img class="old-mii" src=""></img>
						<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--mdi" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="#888888" d="M4 15V9h8V4.16L19.84 12L12 19.84V15H4Z"></path></svg>
						<div class="new-mii-wrapper">
							<img class="new-mii" src=""></img>
						</div>
					</div>
				</div>
				<button class="button primary" id="saveButton">Save!</button>
			</div>
		</form>
		</div>
	</div>

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