<div style="display: flex; gap: 0.5rem; flex-direction: column;">
    <div class="form-group">    
        <label>Active</label>
        <div class="form-fields">
            <input type="checkbox" name="active" {{checked active}}/>
        </div>
    </div>


    <div class="form-group">    
        <label>Type</label>
        <div class="form-fields">
            <select name="type">
                {{selectOptions typeOptions selected=type}}
            </select>
        </div>
    </div>

    {{#if (eq type "any")}}
    <p>{{localize "TMFX.app.randomizationEditor.option.any.hint"}}</p>
    {{else if (eq type "range")}}
        {{#each controls}}
            {{~>tmfx-control}}
        {{/each}}
    {{else}}
        {{#each controls}}
            {{~>tmfx-control}}
        {{/each}}
        <button type="button" data-action="addListElement">{{localize "TMFX.app.randomizationEditor.option.list.add"}}</button>
    {{/if}}

    {{#if linkables}}
    <br>
    <div class="form-group">
        <label>{{localize "TMFX.app.randomizationEditor.option.link.label"}}</label>
        <div class="form-fields">
            <select name="link">
                {{selectOptions linkables selected=link blank=""}}
            </select>
        </div>
        <p class="hint">{{localize "TMFX.app.randomizationEditor.option.link.hint"}}</p>
    </div>
    {{/if}}
</div>