<div class="tab" data-group="main" data-tab="appearance">

    <fieldset class="appearance">
        <legend>{{localize "TOKEN.HeaderAppearance"}}</legend>
        <div class="form-group">
            <label>{{localize "TOKEN.ImagePath"}}</label>
            <div class="form-fields">
                <file-picker name="texture.src" value="{{object.texture.src}}" type="imagevideo"></file-picker>
            </div>
        </div>

        {{#if randomImgEnabled}}
            <div class="form-group">
                <label>{{localize "TOKEN.RandomImg"}}</label>
                <input type="checkbox" name="randomImg" {{checked object.randomImg}} />
            </div>
        {{else if hasAlternates}}
            <div class="form-group">
                <label>{{localize "TOKEN.ImageAlts"}}</label>
                <select class="alternate-images" name="alternateImages">
                    {{selectOptions alternateImages selected=object.texture.src blank=""}}
                </select>
            </div>
        {{/if}}

        <div class="form-group slim">
            <label>{{localize "TOKEN.Mirror"}}</label>
            <div class="form-fields">
                <label>{{localize "TOKEN.MirrorX"}}</label>
                <input type="checkbox" name="mirrorX" {{checked mirrorX}} />
                <label>{{localize "TOKEN.MirrorY"}}</label>
                <input type="checkbox" name="mirrorY" {{checked mirrorY}} />
            </div>
        </div>

        <div class="form-group">
            <label>{{localize "TOKEN.TintColor"}}</label>
            <div class="form-fields">
                <color-picker name="texture.tint" value="{{object.texture.tint}}"></color-picker>
            </div>
        </div>

        <div class="form-group">
            <label>{{localize "TOKEN.Opacity"}}</label>
            <div class="form-fields">
                {{rangePicker name="alpha" value=object.alpha min="0" max="1" step="0.05"}}
            </div>
        </div>

        {{#if showHexagonalShapes}}
            <div class="form-group slim">
                <label>{{localize "TOKEN.HexagonalShape"}}</label>
                <div class="form-fields">
                    <select name="hexagonalShape">
                        {{selectOptions hexagonalShapes selected=object.hexagonalShape}}
                    </select>
                </div>
                <p class="hint">{{localize "TOKEN.HexagonalShapeHint"}}</p>
            </div>
        {{/if}}
    </fieldset>

    <fieldset class="size">
        <legend>{{localize "PF2E.Token.Size.Label"}}</legend>
        <div class="form-group slim">
            <label>{{localize "TOKEN.ImageFitMode"}}</label>
            <div class="form-fields">
                <select name="texture.fit">
                    {{selectOptions textureFitModes selected=object.texture.fit}}
                </select>
            </div>
            <p class="hint">{{localize "TOKEN.ImageFitModeHint"}}</p>
        </div>
        <div class="form-group slim">
            <label>{{localize "Anchor"}}</label>
            <div class="form-fields">
                <label>X</label>
                {{numberInput object.texture.anchorX name="texture.anchorX" placeholder="0.5"}}
                <label>Y</label>
                {{numberInput object.texture.anchorY name="texture.anchorY" placeholder="0.5"}}
            </div>
            <p class="hint">{{localize "TOKEN.AnchorHint"}}</p>
        </div>
        <div class="form-group slim">
            <label>
                {{localize "TOKEN.Dimensions"}} <span class="units">({{localize "GridSpaces"}})</span>
                {{#if sizeLinkable}}
                    <a data-action="toggle-link-to-size" title="{{localize (concat "PF2E.Token.Size.LinkToActorSize." linkToSizeTitle)}}">
                        <i class="fa-solid fa-fw fa-lock{{#unless object.flags.pf2e.linkToActorSize}}-open{{/unless}}"></i>
                    </a>
                {{/if}}
            </label>
            <div class="form-fields">
                <label>{{localize "Width"}}</label>
                <input type="number" step="0.1" name="width" placeholder="units" value="{{object.width}}" {{disabled object.flags.pf2e.linkToActorSize}} />
                <label>{{localize "Height"}}</label>
                <input type="number" step="0.1" name="height" placeholder="units" value="{{object.height}}" {{disabled object.flags.pf2e.linkToActorSize}} />
            </div>
        </div>
        <div class="form-group scale">
            <label>
                {{localize "Scale"}} <span class="units">({{localize "Ratio"}})</span>
                {{#if (and sizeLinkable object.flags.pf2e.linkToActorSize)}}
                    <a data-action="toggle-autoscale" title="{{localize (concat "PF2E.Token.Size.LinkToActorSize." autoscaleTitle)}}">
                        <i class="fa-solid fa-fw fa-lock{{#unless object.flags.pf2e.autoscale}}-open{{/unless}}"></i>
                    </a>
                {{/if}}
            </label>
            <div class="form-fields">
                {{rangePicker name="scale" value=scale min="0.2" max="3.0" step="0.05"}}
            </div>
        </div>
    </fieldset>

    <fieldset>
        <legend>{{localize "TOKEN.RING.SHEET.legend"}}</legend>
        {{formField fields.ring.fields.enabled value=object.ring.enabled}}
        {{formField fields.ring.fields.colors.fields.ring value=object.ring.colors.ring}}
        {{formField fields.ring.fields.colors.fields.background value=object.ring.colors.background}}
        {{formField fields.ring.fields.subject.fields.texture value=object.ring.subject.texture}}
        {{formField fields.ring.fields.subject.fields.scale value=object.ring.subject.scale max=3 min=0.8 step=0.02}}
        {{formField fields.ring.fields.effects value=object.ring.effects input=ringEffectsInput stacked=true}}
    </fieldset>
</div>
