<form class="enhanced-terrain-config" autocomplete="off" onsubmit="event.preventDefault();">
    <p class="notes">
        {{localize "EnhancedTerrainLayer.Configure"}}
    </p>
    <div class="form-group">
        <label for="x">X-Position <span class="units">(pixels)</span></label>
        <input type="text" name="x" value="{{object.x}}" data-dtype="Number" />
    </div>

    <div class="form-group">
        <label for="y">Y-Position <span class="units">(pixels)</span></label>
        <input type="text" name="y" value="{{object.y}}" data-dtype="Number" />
    </div>

    <div class="form-group">
        <label for="width">Width <span class="units">(pixels)</span></label>
        <input type="text" name="width" value="{{object.width}}" data-dtype="Number" />
    </div>

    <div class="form-group">
        <label for="height">Height <span class="units">(pixels)</span></label>
        <input type="text" name="height" value="{{object.height}}" data-dtype="Number" />
    </div>

    <div class="form-group">
        <label for="multiple">{{localize "EnhancedTerrainLayer.Cost"}}</label>
        <div class="form-fields">
            <input type="range" name="multiple" data-dtype="Number" value="{{object.multiple}}" min="0" max="4" step="1">
            <span class="range-value">{{object.multiple}}</span>
        </div>
    </div>
    <div class="form-group">
        <label for="drawcolor">{{localize "EnhancedTerrainLayer.TerrainColor"}}</label>
        <div class="form-fields">
            {{ colorPicker name="drawcolor" value=object.drawcolor}}
        </div>
    </div>
    <div class="form-group">
        <label for="terrainheight">{{localize "EnhancedTerrainLayer.TerrainHeight"}}</label>
        <div class="form-fields" style="position:relative;">
            <label class="terrainheight-label">{{localize "EnhancedTerrainLayer.Min"}}</label>
            <input type="number" name="min" data-dtype="Number" value="{{object.min}}">
            <label class="terrainheight-label">{{localize "EnhancedTerrainLayer.Max"}}</label>
            <input type="number" name="max" data-dtype="Number" value="{{object.max}}">
        </div>
    </div>
    <div class="form-group">
        <label for="environment">{{localize "EnhancedTerrainLayer.Environment"}}</label>
        <select name="environment" data-dtype="String">
            <option value=""></option>
            <optgroup label="{{localize "EnhancedTerrainLayer.Environment"}}" data-type="environment">
                {{ selectOptions environments selected=object.environment }}
            </optgroup>
            <optgroup label="{{localize "EnhancedTerrainLayer.Obstacle"}}" data-type="obstacle">
                {{ selectOptions obstacles selected=object.environment }}
            </optgroup>
        </select>
    </div>
    {{#if useObstacles}}
    <div class="form-group">
        <label for="obstacle">{{localize "EnhancedTerrainLayer.Obstacle"}}</label>
        <select name="obstacle" data-dtype="String">
            {{ selectOptions obstacles selected=object.obstacle blank=' ' }}
        </select>
    </div>
    {{/if}}
    <div class="form-group">
        <label for="hidden">{{localize "EnhancedTerrainLayer.Inactive"}}</label>
        <input type="checkbox" name="hidden" {{checked object.hidden}} data-dtype="Boolean">
    </div>

    <div class="form-group">
        <label for="locked">{{localize "EnhancedTerrainLayer.Locked"}}</label>
        <input type="checkbox" name="locked" {{checked object.locked}} data-dtype="Boolean">
    </div>

    <button type="submit" name="submit" value="1"><i class="far fa-save"></i> {{localize "EnhancedTerrainLayer.UpdateTerrain"}}</button>
</form>