<div>
        <p class="hint">{{localize "hexplorer.hexplorer-app.brushes.hint"}}</p>
    <fieldset>
        <legend>{{localize "hexplorer.hexplorer-app.brushes.legend"}}</legend>
        <div class="form-fields">
            <label>{{localize "hexplorer.hexplorer-app.brushes.radius"}}</label>
            <range-picker id="brush-radius" value="{{brushRadius}}" min="0" max="10" step="1"></range-picker>
        </div>
        <ul class="brushes-list scrollable">
            {{#each brushes as |brush|}}
            <li class="brush {{#if brush.active}}active{{/if}}" data-brush-id="{{@key}}">
                <h4 class="brush-name">{{brush.name}}</h4>
                <span class="brush-color" style="background-color: {{brush.data.color}};"></span>
                <div class="brush-actions">
                    {{#unless brush.noDelete}}
                    <button class="brush-apply" data-tooltip="{{localize "hexplorer.hexplorer-app.brushes.apply"}}"><i style="margin: 0;" class="fas fa-check"></i></button>
                    <button class="brush-delete" data-tooltip="{{localize "Delete"}}"><i style="margin: 0;" class="fas fa-trash"></i></button>  
                    {{/unless}}
                </div>
            </li>
            {{/each}}
        </ul>
    </fieldset>
    <fieldset>
        <legend>{{localize "hexplorer.hexplorer-app.settings.legend"}}</legend>
        <div class="form-group">
            <label>{{localize "hexplorer.hexplorer-app.settings.show-color.label"}}</label>
            <input type="checkbox" name="config.showColor" {{checked config.showColor}}>
        </div>
        <div class="form-group">
            <label>{{localize "hexplorer.hexplorer-app.settings.always-banner.label"}}</label>
            <input type="checkbox" name="config.alwaysBanner" {{checked config.alwaysBanner}}>
        </div>
    </fieldset>
</div>