<form autocomplete="off" onsubmit="event.preventDefault()">
    <div style="max-width: 500px;">
        <div class="form-group initial-position">
            <label>{{localize "LockView.SetInitialView.Old"}}</label>
            <div class="flex-container" style="display:flex; align:left;">
                <label>x&nbsp;</label>
                <input type="text" name="initial.x" value={{initial.x}} data-dtype="Number" style="width:33%; color:#5e5e5e" readonly="readonly">  
                <label>&nbsp;y&nbsp;</label>
                <input type="text" name="initial.y" value={{initial.y}} data-dtype="Number" style="width:33%; color:#5e5e5e" readonly="readonly">  
                <label>&nbsp;{{localize "LockView.SetView.LabelScale"}}&nbsp;</label> 
                <input type="text" name="initial.scale" value={{initial.scale}} data-dtype="Number" style="width:33%; color:#5e5e5e" readonly="readonly">
            </div>
        </div>
        <div class="form-group initial-position">
            <label>{{localize "LockView.SetInitialView.New"}}</label>
            <div class="flex-container" style="display:flex; align:left">
                <label>x&nbsp;</label>
                <input type="text" name="dataX" value={{initial.x}} data-dtype="Number" style="width:33%">  
                <label>&nbsp;y&nbsp;</label>
                <input type="text" name="dataY" value={{initial.y}} data-dtype="Number" style="width:33%">  
                <lavel>&nbsp;{{localize "LockView.SetView.LabelScale"}}&nbsp;</lavel>
                <input type="text" name="dataScale" value={{initial.scale}} data-dtype="Number" style="width:33%">
            </div>
        </div>
        <div class="form-group initial-position">
            <label>{{localize "LockView.SetInitialView.GridSpaces"}}</label>
            <div class="flex-container" style="display:flex; align:left">
                <label>x&nbsp;</label>
                <input type="text" name="gridX" value={{grid.x}} data-dtype="Number" style="width:33%">  
                <label>&nbsp;y&nbsp;</label>
                <input type="text" name="gridY" value={{grid.y}} data-dtype="Number" style="width:33%">
                <lavel style="visibility: hidden">&nbsp;{{localize "LockView.SetView.LabelScale"}}&nbsp;</lavel>
                <input type="text" name="gridScale" value={{initial.scale}} data-dtype="Number" style="width:33%;visibility: hidden">  
            </div>
        </div>
        <div class="form-group initial-position" style="width:100%">
            <label>{{localize "LockView.SetInitialView.GridScale"}}</label>
            <div class="flex-container" style="align:right; width:60%">
                <button type="button" name="physicalGrid">
                    {{localize "LockView.SetView.Scale3"}}
                </button>
            </div>
            
        </div>
        <div class="form-group initial-position">
            <label>{{localize "LockView.SetInitialView.Player"}}</label>
            <div class="flex-container" style="align:right">
                <select name="playerList" class="select" default="" style="width:50%;">
                    {{#each users}}
                    <option value="player-{{this.iteration}}">{{this.name}}</option>
                    {{/each}}
                </select>
                <button type="button" name="captureView" style="width:48%">
                    {{localize "LockView.SetInitialView.CaptureView"}}
                </button>
            </div>
        </div>
        <div class="form-group initial-position">
            <label>{{localize "LockView.SetInitialView.Snap"}}</label>
            <div class="flex-container" style="align:right">
                <select name="snapDir" class="select" default="" style="width:50%;">
                    <option value="topLeft">{{localize "LockView.SetInitialView.TopLeft"}}</option>
                    <option value="topRight">{{localize "LockView.SetInitialView.TopRight"}}</option>
                    <option value="downLeft">{{localize "LockView.SetInitialView.BottomLeft"}}</option>
                    <option value="downRight">{{localize "LockView.SetInitialView.BottomRight"}}</option>
                </select>
                <button type="button" name="snapGrid" style="width:48%">
                    {{localize "LockView.SetInitialView.Snap"}}
                </button>
            </div>
        </div>
        
        <div class = "form-group">
            <button type="save" name="save" style="width:25%;">
                <i class="far fa-save"></i> {{localize "LockView.SetInitialView.BtnSave"}}
            </button>
            <button type="cancel" name="cancel" style="width:25%;">
                <i class="far fa-delete"></i> {{localize "LockView.SetView.BtnCancel"}}
            </button>
        </div>
        
    </div>

</form>