<form class="macro-sheet editable flexcol">

    <div class="form-group" style="flex: 0;">
        <label>{{localize 'MassEdit.css.pick'}}</label>
        <select class="selectStyle" name="selectedStyle">
            {{#each styles as |style|}}
            <option value="{{style}}" {{#if (eq ../styleInUse style)}}selected="selected"{{/if}}>{{style}}</option>
            {{/each}}
        </select>`
    </div>

    <div style="flex: 0;">
        <style class="previewStyle">{{css}}</style>
        <h2>{{localize 'Preview'}}:</h2>
        <hr>
        <div class="form-group slim meCommon">
            <label>{{localize 'TOKEN.Dimensions'}} <span class="units">({{localize 'GridSpaces'}})</span></label>
            <div class="form-fields">
                <label>{{localize 'Width'}}</label>
                <input type="number" step="0.1" placeholder="units" value="1" disabled>
                <label>{{localize 'Height'}}</label>
                <input type="number" step="0.1" placeholder="units" value="1" disabled>
            </div>
            <div class="mass-edit-checkbox meCommon"><input class="mass-edit-control" type="checkbox" data-dtype="Boolean" }=""></div>
        </div>
        <div class="form-group meDiff">
            <label>{{localize 'Scale'}} <span class="units">({{localize 'MassEdit.common.ratio'}})</span></label>
            <div class="form-fields">
                <input type="range" value="1" min="0.2" max="3.0" step="0.1" disabled>
                <span class="range-value">1</span>
            </div>
            <div class="mass-edit-checkbox meDiff"><input class="mass-edit-control" type="checkbox" data-dtype="Boolean" }=""></div>
        </div>
        <div class="form-group meFlag">
            <label>Sight Limit <span class="units">(ft)</span></label>
            <div class="form-fields">
                <input type="number" data-dtype="Number" min="0.0" step="0.1" placeholder="Unlimited" disabled>
            </div>
            <div class="mass-edit-checkbox meFlag"><input class="mass-edit-control" type="checkbox" data-dtype="Boolean" }=""></div>
        </div>
        <div class="form-group meInsert">
            <label>Mass Edit Field</label>
            <div class="form-fields">
                <input type="number" data-dtype="Number" min="0.0" step="0.1" placeholder="Custom Field" disabled>
            </div>
            <div class="mass-edit-checkbox meInsert"><input class="mass-edit-control" type="checkbox" data-dtype="Boolean" }=""></div>
        </div>
        <hr>
    </div>

    <h2 style="flex: 0;">CSS</h2>
    <div class="form-group stacked command">
        <textarea class="cssTextArea" name="css" {{#if disableCSS}}disabled{{/if}}>{{css}}</textarea>
    </div>

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