<form onsubmit="event.preventDefault();">
    <div class="items-list">
        <div class="item-header flexrow" style="position: relative;">
            <h3 class="item-name noborder flexrow">
                ID
            </h3>
            <div class="item-detail item-x">X</div>
            <div class="item-detail item-y">Y</div>
            {{#if (eq action "pancanvas")}}
            <div class="item-detail item-scale">Scale</div>
            {{/if}}
            {{#if (eq action "teleport")}}
            <div class="item-name item-scene">Scene</div>
            {{/if}}
            <div class="item-controls flexrow">
                <a class="item-control item-add"><i class="fas fa-plus"></i> Add</a>
            </div>
        </div>
        <ol class="item-list">
            {{#each locations}}
            <li class="item flexrow" draggable="false" style="position:relative;">
                <div class="item-name flexrow">
                    <input type="text" name="id" value="{{this.id}}" />
                </div>

                <div class="item-detail">
                    <input type="text" name="x" value="{{this.x}}" />
                </div>

                <div class="item-detail">
                    <input type="text" name="y" value="{{this.y}}" />
                </div>
                {{#if (eq @root.action "pancanvas")}}
                <div class="item-detail">
                    <input type="text" name="scale" value="{{this.scale}}" />
                </div>
                {{/if}}
                {{#if (eq @root.action "teleport")}}
                <div class="item-name">
                    <select name="sceneId" style="width: 100%;">
                        {{selectOptions @root.sceneList selected=this.sceneId}}
                    </select>
                </div>
                {{/if}}

                <div class="item-controls flexrow" buttons="1">
                    <a class="item-control item-delete" title="Delete"><i class="fas fa-trash"></i></a>
                </div>
            </li>
            {{/each}}
        </ol>
    </div>
    <footer class="sheet-footer flexrow">
        <button type="submit" name="submit">
            <i class="far fa-save"></i> Save Changes
        </button>
        <button type="button" name="close">
            <i class="fas fa-undo"></i> Cancel
        </button>
    </footer>
</form>