<div class="drop-container container {{#if(isDragOver)}}drag-over{{/if}}"
    on:drop="addFiles(scope.event.dataTransfer.files, scope.event)"
    on:dragover="dragover(scope.event, true)"
    on:dragleave="dragover(scope.event, false)"
    on:mouseover="mouseover(scope.event, true)"
    on:mouseleave="mouseover(scope.event, false)">

    {{#if(files.length)}}
        {{#for(row of files)}}
        <div class="tile">
            <div class="tile-icon">
            {{#if(row.isImage())}}
            <figure class="avatar avatar-lg">
                <img src="{{row.uri}}" alt="Upload">
            </figure>
            {{else}}
                <i class="fa fa-3x fa-file"></i>
            {{/if}}
            </div>
            <div class="tile-content">
            <p class="tile-subtitle text-gray text-ellipsis">{{row.id}}</p>
            {{#if(row.error)}}
            <p class="text-error">{{row.error}}</p>
            {{else}}
                {{#if(showProgress(row.progress))}}
                <div class="bar bar-sm">
                    <div class="bar-item" 
                        role="progressbar" 
                        style="width:{{row.progress}}%;"
                        aria-valuenow="{{row.progress}}"
                        aria-valuemin="0" aria-valuemax="{{maxProgressValue}}"></div>
                </div>
                {{/if}}
            {{/if}}
            </div>
            <div class="tile-action">
                <can-slot name="actions" row:bind="row">
                    <button class="btn btn-primary" type="button" on:click="scope.top.remove(row)">
                        <i class="fa fa-trash"></i>
                    </button>
                </can-slot>
            </div>
        </div>
        <div class="divider"></div>
        {{/for}}

    {{else}}
        <p>Drag and drop files here...</p>
    {{/if}}

    {{#if(isMouseOver)}}
        <div class="mouseover-tooltip" on:click="uploadClick(scope.event)">
            <i class="fa fa-upload"></i> Drag files or click to Browse...
        </div>
    {{/if}}
    <input type="file" class="d-none" on:change="addFiles(scope.event.target.files, scope.event)" />
</div>