<div>
        <p class="notification warning">{{localize "media-optimizer.tile-combiner.notes"}}</p>
        <div class="form-group">
            <label>{{localize "media-optimizer.tile-combiner.mode.label"}}</label>
            <div class="form-fields">
                {{#if macroTiles}}
                <select name="mode" disabled>
                    <option>Macro</option>
                </select>
                {{else}}
                <select name="mode">
                    {{selectOptions selectModeOptions selected=mode localize=true}}
                </select>
                {{/if}}
            </div>
        </div>

        <div class="form-group">
            <label>{{localize "media-optimizer.tile-combiner.background.label"}}</label>
            <div class="form-fields">
                <input type="checkbox" name="background" {{#if background}}checked{{/if}}>
            </div>
            <p class="hint">{{localize "media-optimizer.tile-combiner.background.notes"}}</p>
        </div>

        <div class="form-group">
            <label for="folderPath">{{localize "media-optimizer.tile-combiner.folderPath.label"}}</label>
            <div class="form-fields">
                <file-picker type="folder" name="folderPath" value="{{folderPath}}"></file-picker>
            </div>
        </div>

        <div class="form-group">
            <label for="fileName">{{localize "media-optimizer.tile-combiner.fileName.label"}}</label>
            <div class="form-fields">
                <input type="text" name="fileName" value="" placeholder="{{fileName}}">
            </div>
        </div>

        <div class="form-group">
            <label>{{localize "media-optimizer.tile-combiner.deleteTiles.label"}}</label>
            <div class="form-fields">
                <input type="checkbox" name="deleteTiles" {{#if deleteTiles}}checked{{/if}}>
            </div>
        </div>

        <p class="notes">{{localize "media-optimizer.tile-combiner.info"}}</p>

    <footer class="form-footer">
        <button type="submit" data-action="backup-combine">
            <i class="far fa-compress"></i> {{localize "media-optimizer.tile-combiner.buttons.backup-combine"}}
        </button>
        <button type="submit" data-action="combine">
            <i class="far fa-compress"></i> {{localize "media-optimizer.tile-combiner.buttons.combine"}}
        </button>
        <button data-action="cancel">
            <i class="far fa-times"></i> {{localize "media-optimizer.tile-combiner.buttons.cancel"}}
        </button>
    </footer>
</div>