<form class="standard-form" autocomplete="off">
    <ul class="scrollable" style="padding: 0;margin: 0; list-style-type:none; max-height: 70vh;">
        {{#each tokenFaces}}
        <li class="standard-form" id="{{this.id}}">
            <fieldset class="collapsed">
                <legend>{{this.id}} <a data-id="{{this.id}}" class="document-id-link"
                        data-tooltip="tokenflip.token-flip-config.copyID"><i class="fa-solid fa-passport"></i></a>
                </legend>

                <div class="form-group">
                    <label>{{localize "TOKEN.FIELDS.ring.subject.texture.label"}}</label>
                    <file-picker type="imagevideo" name="subject" value="{{this.subject}}"></file-picker>
                </div>

                <div class="form-group">
                    <label>{{localize "TOKEN.FIELDS.texture.src.label"}}</label>
                    <file-picker type="imagevideo" name="img" value="{{this.img}}"></file-picker>
                </div>

                <div class="form-group">
                    <label>{{localize "tokenflip.token-flip-config.model3d"}}</label>
                    <file-picker type="graphics" name="model3d" value="{{this.model3d}}"></file-picker>
                </div>

                <div class="form-group">
                    <label id="actlabel">{{localize "TOKEN.FIELDS.actorId.label"}}</label>
                    <select name="actor" data-dtype="String">
                        {{selectOptions ../actors selected=this.actorId localize=true labelAttr="name"
                        valueAttr="id"}}
                    </select>
                </div>


                <div class="form-group slim">
                    <label>{{localize "TOKEN.Dimensions"}}<span class="units">({{localize "GridSpaces"}})</span></label>
                    <div class="form-fields">
                        <label>{{localize "Width"}}</label>
                        <input type="number" value="{{this.width}}" step="any" name="width" placeholder="spaces">
                        <label>{{localize "Height"}}</label>
                        <input type="number" value="{{this.height}}" step="any" name="height" placeholder="spaces">
                    </div>
                </div>

                <div class="form-group slim">
                    <label>{{localize "Scale"}}</label>
                    <div class="form-fields">
                        <label>X</label>
                        <range-picker name="scaleX" value="{{this.scaleX}}" min="-3.0" max="3.0"
                            step="0.1"></range-picker>
                        <label>Y</label>
                        <range-picker name="scaleY" value="{{this.scaleY}}" min="-3.0" max="3.0"
                            step="0.1"></range-picker>
                    </div>
                </div>

                <div class="form-group">
                    <label>{{localize "tokenflip.token-flip-config.transition.label"}}</label>
                    <select name="transition" data-dtype="String">
                        {{selectOptions ../transitionOptions selected=this.transition localize=true}}
                    </select>
                </div>

                <div class="form-group">
                    <label>{{localize "tokenflip.token-flip-config.autoFlip.label"}}</label>
                    <select name="autoFlip" data-dtype="Number">
                        {{selectOptions ../autoFlipOptions selected=this.autoFlip localize=true}}
                    </select>
                </div>

                <div class="form-group">
                    <label>{{localize "tokenflip.token-flip-config.autoFlipMacro.label"}}</label>
                    <div class="form-fields">
                    <document-tags name="autoFlipMacro" type="Macro" single=""
                        value="{{this.autoFlipMacro}}"></document-tags>
                    </div>
                    <p class="hint">{{localize "tokenflip.token-flip-config.autoFlipMacro.hint"}}</p>
                </div>


                <div class="flexrow footer">
                    <img class="thumbnail"
                        style=" max-width: 64px;height: 64px;border: none; margin-right: 1rem; object-fit: contain;"
                        title="{{this.actorName}}"
                        src="{{#if this.subject}}{{this.subject}}{{else}}{{this.img}}{{/if}}">
                    <button type="button" class="expand-collapse" style="max-width: var(--input-height);"><i
                            class="fas fa-angle-up" style="margin: 0;"></i></button>
                    <button type="button" class="delete" data-id="{{this.id}}"><i class="fas fa-trash"></i> {{localize
                        "Delete"}}</button>
                </div>
            </fieldset>

        </li>
        {{/each}}
    </ul>
    <button id="add"><i class="fas fa-plus"></i> {{localize "tokenflip.token-flip-config.add"}}</button>
</form>