<div>
    <div class="form-group">
        <label>Enable Drag Upload</label>
        <input type="checkbox" name="enabled" {{checked enabled}}>
        <p class="hint">Files dragged onto canvas or preset browser will be uploaded to the destination directory.</p>
    </div>

    <hr>

    <div class="form-group">
        <label>Upload Destination</label>
        <div class="form-fields">
            <label>{{source}} : {{#if bucket}}{{bucket}} : {{/if}}{{target}}</label>
            <button data-action="browse">Browse</button>
        </div>
        <p class="hint">Location the dragged in files are to be stored within.</p>
    </div>

    <div class="form-group">
        <label>Overwrite Matching Names</label>
        <input type="checkbox" name="overwrite" {{checked overwrite}}>
        <p class="hint">When enabled dragged in files which match names of existing files will overwrite them.</p>
    </div>
    
    <hr>

    <div class="form-group" style="display: block;">
        <label>Template Presets</label>
        <p class="hint">Token, Tile, and AmbientSound presets to be used as templates for the drag uploaded files.</p>
        <br>
        <div class="form-fields">
            <div class="preset-browser" style="min-height: 120px;">
                {{#if presets}}
                <div class="item-list folder-items" data-tooltip-direction="RIGHT" data-tooltip-class="preset-tooltip" style="min-height: 170px; margin: 1px">
                    {{>me-presets-content createEnabled=False callback=../callback presets=presets}}
                </div>
                {{else}}
                <span style="width: 95%;height: 120px;position: absolute;text-align: center;align-content: center;border: 1px dashed;">DRAG PRESETS HERE</span>
                {{/if}}
            </div>
        </div>
    </div>


</div>