<form>
    <nav class="sheet-tabs tabs" data-group="primary-tabs">
        <a class="item" data-tab="scale"><i class="fa-solid fa-arrow-up-triangle-square"></i> Scale</a>
        <a class="item" data-tab="movement"><i class="fa-solid fa-shoe-prints"></i> Movement</a>
        <a class="item" data-tab="misc"><i class="fa-solid fa-gear"></i> Misc</a>
    </nav>

    <section class="content">
        <div class="tab" data-tab="scale" data-group="primary-tabs">
            <div class="" style="display: flex;">
                {{#each markerTemplates as |template|}}
                <a class="marker" style="flex:1;" data-height="{{template.height}}">
                    <img src="{{template.src}}" title="{{template.height}}ft" height="68.25">
                </a>
                {{/each}}
            </div>
            <p class="notes">Select and place reference tiles on the scene. ALT+Mouse Wheel can be used to scale the tiles up and down. </p>

            <img src="modules/multi-token-edit/images/scenescape_sample.webp" height="148">

            <div class="form-group">
                <label>Distance <span class="units" style="color: darkorange;">(feet)</span></label>
                <div class="form-fields">
                    <input type="range" value="{{scaleDistance}}" min="6" max="500" step="1">
                    <input type="number" value="{{scaleDistance}}" min="6" max="500" step="1" class="range-value" name="scaleDistance"></input>
                </div>
                <p class="notes">At what distance the apparent size of an object halves?</p>
            </div>

            <img src="modules/multi-token-edit/images/scenescape_sample_distance.webp" height="148">
        </div>
        
        <div class="tab" data-tab="movement" data-group="primary-tabs">
            <div class="form-group">
                <label>Step Size <span class="units" style="color: darkorange;">(feet)</span></label>
                <div class="form-fields">
                    <label>⇆</label>
                    <input type="number" value="{{speed}}" min="0.1" max="1000" step="0.1" name="speed"></input>
                    <label>⇅</label>
                    <input type="number" value="{{speedY}}" min="0.1" max="1000" step="0.1" name="speedY"></input>
                </div>
                <p class="notes">Distance tokens and tiles will move when pressing WASD or arrow keys.</p>
            </div>

            <div class="form-group">
                <label>Limits</label>
                <div class="form-fields">
                    <button class="select-limit-upper" type="button" data-tooltip="Select upper limit.">
                        <i class="fa-solid fa-arrow-up-to-line"></i>
                    </button>
                    <button class="select-limit-lower" type="button" data-tooltip="Select lower limit.">
                        <i class="fa-solid fa-arrow-down-to-line"></i>
                    </button>
                    <button class="auto-select-limits" type="button" data-tooltip="Set limits to highest and lowest reference tile.">
                        <i class="fa-solid fa-arrows-left-right-to-line fa-rotate-90"></i>
                    </button>
                    <button class="clear-limits" type="button" data-tooltip="Clear all movement limits." style="color: red;">
                        <i class="fa-solid fa-trash"></i>
                    </button>
                </div>
                <p class="notes">Select lower and upper limit lines for token movement.</p>
            </div>
            <img src="modules/multi-token-edit/images/scenescape_sample_limit.webp" height="148">
        </div>

        <div class="tab" data-tab="misc" data-group="primary-tabs">
            <div class="form-group">
                <label>Black Bars</label>
                <div class="form-fields">
                    <input type="checkbox" name="blackBars" {{checked blackBars}}/>
                </div>
                <p class="notes">Display black bars in the padded area of the scene.</p>
            </div>
            <div class="form-group">
                <label>Pixel Perfect Hover</label>
                <div class="form-fields">
                    <input type="checkbox" name="pixelPerfect" {{checked pixelPerfect}}/>
                </div>
                <p class="notes">When enabled `Pixel Perfect Hover` will be force applied on this scene.</p>
            </div>
        </div>
    </section>

    <footer class="sheet-footer flexrow">
        <button type="submit"><i class="far fa-save"></i>{{localize 'Save'}}</button>
    </footer>
</form>