<div data-element="dropzone" class="umb-file-dropzone">

    <ng-form name="uploadForm" umb-isolate-form>

        <!-- Drag and drop files area -->
        <div ngf-drop
            ng-hide="hideDropzone === 'true'"
            ng-model="filesHolder"
            ngf-change="handleFiles($files, $event, $invalidFiles)"
            class="dropzone"
            ngf-drag-over-class="'drag-over'"
            ngf-multiple="true"
            ngf-allow-dir="true"
            ngf-pattern="{{ accept }}"
            ngf-max-size="{{ maxFileSize }}"
            ng-class="{'is-small': compact !=='false' || (done.length + queue.length) > 0 }">

            <div class="content" >
                <p>
                    <localize key="media_dragAndDropYourFilesIntoTheArea">Drag and drop your file(s) into the area</localize>
                </p>

                <!-- Drag and drop illustration -->
                <img class="illustration" src="assets/img/uploader/upload-illustration.svg" alt="" draggable="false" />

                <!-- Select files -->
                <button
                     type="button"
                     data-element="button-uploadMedia"
                     class="file-select"
                     ngf-select
                     ng-model="filesHolder"
                     ngf-change="handleFiles($files, $event, $invalidFiles)"
                     ngf-multiple="true"
                     ngf-pattern="{{ accept }}"
                     ngf-max-size="{{ maxFileSize }}">
                     -&nbsp;<localize key="media_orClickHereToUpload">or click here to choose files</localize>
                </button>
            </div>
        </div>

        <!-- List of uploading/uploaded files  -->
        <ul class="file-list" ng-show="done.length > 0 || queue.length > 0 || rejected.length > 0 || filesHolder.length > 0">

            <!-- make list sort order the same as photo grid. The last uploaded photo in the top -->
            <li class="file" ng-repeat="file in done track by file.key">

                <!-- file name -->
                <div class="file-description">{{ file.name }}</div>

                <!-- upload success -->
                <div class="file-icon" ng-if="file.uploadStatus == 'done'">
                    <umb-icon icon="icon-check" class="icon color-green"></umb-icon>
                </div>

            </li>

            <li class="file" ng-if="currentFile">

                <!-- file name -->
                <div class="file-name">{{currentFile.name}}</div>

                <!-- upload progress bar -->
                <div class="file-progress">
                    <span class="file-progress-indicator"
                    ng-style="{'width': currentFile.uploadProgress + '%'}"></span>
                </div>
            </li>

            <!-- make list sort order the same as photo grid. The last uploaded photo in the top -->
            <li class="file" ng-repeat="queued in queue track by queued.key">

                <!-- file name -->
                <div class="file-name">{{queued.name}}</div>
            </li>

            <li class="file" ng-repeat="file in rejected track by file.key">

                <!-- file name -->
                <div class="file-description">

                   <strong>{{file.name}}</strong>

                   <span class="file-error" ng-if="file.$error">
                      <span ng-if="file.$error === 'pattern'" class="errorMessage color-red"><localize key="media_disallowedFileType">Cannot upload this file, it does not have an approved file type</localize></span>
                      <span ng-if="file.$error === 'maxSize'" class="errorMessage color-red"><localize key="media_maxFileSize">Max file size is</localize> "{{maxFileSize}}"</span>
                   </span>

                   <span class="file-error" ng-if="file.serverErrorMessage">
                       <span class="errorMessage color-red">{{file.serverErrorMessage}}</span>
                   </span>

                </div>

                <!-- upload error -->
                <div class="file-icon">
                   <umb-icon icon="icon-delete" class="icon color-red"></umb-icon>
                </div>

            </li>
        </ul>

    </ng-form>

</div>
