<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' || (processed.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="queue.length > 0 || processed.length > 0 || filesHolder.length > 0">


          <li class="file" ng-if="totalMessages > 1">
              <div class="file-description">
                <!-- Okay all -->
                <button class="btn btn-primary ok-all" type="button" ng-click="dismissAllMessages()">
                  <localize key="general_ok">Ok</localize> (<localize key="general_all">All</localize>)
                </button>
              </div>
            </li>

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

                <div class="file-description">
                  <div>
                    <span>{{ file.name }}</span>
                    <span ng-if="file.messages.length > 0 || file.$error" class="file-messages">
                      <span class="errorMessage color-red" ng-repeat="message in file.messages">{{message.header}}: {{message.message}}</span>
                      <span ng-if="file.$error === 'pattern'" class="errorMessage color-red"><localize key="media_disallowedFileType"></localize></span>
                      <span ng-if="file.$error === 'maxSize'" class="errorMessage color-red"><localize key="media_maxFileSize"></localize> "{{maxFileSize}}"</span>
                    </span>
                  </div>

                  <!-- upload success -->
                  <span ng-if="file.messages.length === 0">
                    <umb-icon icon="icon-check" class="icon color-green"></umb-icon>
                  </span>

                  <!-- requires user input -->
                  <button class="btn btn-primary" type="button" ng-click="dismissMessages(file)" ng-if="file.messages.length > 0">
                    <localize key="general_ok">Ok</localize>
                  </button>
                </div>
            </li>

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

            <li class="file" ng-repeat="file in queue track by file.key">
                <div class="file-description">{{ file.name }}</div>
            </li>
                       
        </ul>
    </ng-form>

</div>
