<form autocomplete="off" onsubmit="event.preventDefault()">
    <style>
        .boxed {
            border: 1px solid black ;
            border-radius: 5px ; 
            max-width: 166px;
            height: {{height}}px;
        }
    </style>

    {{#each macroData}}
        <div class="form-group">
            {{#each this.dataThis}}
                <div class="boxed" style="padding: 5px; margin:2px">
                    <div style="text-align:center;">                    
                        {{localize "MaterialDeck.Macro"}} {{this.iteration}}
                    </div>
                    <div>
                        <select name="macros" class="macros-select" id="macros{{this.iteration}}" default="" style="max-width:140px;">
                            {{#select this.macro}}
                                <option value="">{{localize "MaterialDeck.None"}}</option>
                                {{#each macros}}
                                <option value="{{this._id}}">{{this.name}}</option>
                                {{/each}}
                            {{/select}}
                        </select>
                    </div>
                    {{#if this.furnace}}
                        <label>{{localize "MaterialDeck.FurnaceArgs"}}</label>
                        <input type="text" name="args" id="args{{this.iteration}}" value="{{this.args}}">
                    {{/if}}
                    
                    <div class="flex-container" style="display:flex;flex-direction:row;padding-top:10px">  
                        <label style="flex:1">{{localize "MaterialDeck.Background"}}</label>
                        <input style="flex:1" type="color" name="colorPicker" id="colorpicker{{this.iteration}}" data-dtype="String" value="{{this.color}}">
                    </div>
                </div>
            {{/each}}
        </div>
    {{/each}}
</form>