<div class="row-col" nv-file-drop="" uploader="uploader" filters="queueLimit, customFilter">
    <div class="col-sm w-lg w-auto-xs light lt bg-auto">
      <div class="p-a-md pos-rlt">
        <div ng-show="uploader.isHTML5" class="m-b-md">
            <!-- 3. nv-file-over uploader="link" over-class="className" -->
            <div class="b-a b-info b-2x b-dashed p-a-md text-center m-b" nv-file-over="" over-class="b-info" uploader="uploader">
                Base drop zone
            </div>

            <!-- Example: nv-file-drop="" uploader="{Object}" options="{Object}" filters="{String}" -->
            <div nv-file-drop="" uploader="uploader" options="{ url: '/foo' }">
                <div nv-file-over="" uploader="uploader" over-class="b-danger" class="b-a b-info b-2x b-dashed p-a-md text-center">
                    Another drop zone with its own settings
                </div>
            </div>
        </div>

        <!-- Example: nv-file-select="" uploader="{Object}" options="{Object}" filters="{String}" -->
        <p>Multiple</p>
        <input type="file" nv-file-select="" uploader="uploader" multiple  />

        <p class="m-t-md">Single</p>
        <input type="file" nv-file-select="" uploader="uploader" />
      </div>
    </div>
    <div class="col-sm">
      <div class="p-a-md pos-rlt">
        <div class="m-b"><b class="label info pos-rlt m-r-xs"><i class="arrow right b-info pull-in"></i>{{ uploader.queue.length }}</b> file(s)</div>
        <table class="table white b-a">
            <thead>
                <tr>
                    <th width="50%">Name</th>
                    <th ng-show="uploader.isHTML5">Size</th>
                    <th ng-show="uploader.isHTML5">Progress</th>
                    <th>Status</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="item in uploader.queue">
                    <td><strong>{{ item.file.name }}</strong></td>
                    <td ng-show="uploader.isHTML5" nowrap>{{ item.file.size/1024/1024|number:2 }} MB</td>
                    <td ng-show="uploader.isHTML5">
                        <div class="progress progress-sm m-0 m-t-xs">
                            <div class="progress-bar info" role="progressbar" ng-style="{ 'width': item.progress + '%' }"></div>
                        </div>
                    </td>
                    <td class="text-center">
                        <span ng-show="item.isSuccess" class="text-success"><i class="glyphicon glyphicon-ok"></i></span>
                        <span ng-show="item.isCancel" class="text-warning"><i class="glyphicon glyphicon-ban-circle"></i></span>
                        <span ng-show="item.isError" class="text-danger"><i class="glyphicon glyphicon-remove"></i></span>
                    </td>
                    <td nowrap>
                        <button type="button" class="btn white btn-sm" ng-click="item.upload()" ng-disabled="item.isReady || item.isUploading || item.isSuccess">
                            Upload
                        </button>
                        <button type="button" class="btn white btn-sm" ng-click="item.cancel()" ng-disabled="!item.isUploading">
                            Cancel
                        </button>
                        <button type="button" class="btn white btn-sm" ng-click="item.remove()">
                            Remove
                        </button>
                    </td>
                </tr>
            </tbody>
        </table>
        <div>
          <div>
            <p>Queue progress:</p>
            <div class="progress mb-2">
                <div class="progress-bar progress-bar-striped success" style="width: {{uploader.progress}}%" max="100"></div>
            </div>
          </div>
          <button type="button" class="btn btn-addon btn-info" ng-click="uploader.uploadAll()" ng-disabled="!uploader.getNotUploadedItems().length">
            <i class="fa fa-cloud-upload"></i> Upload all
          </button>
          <button type="button" class="btn btn-addon white" ng-click="uploader.cancelAll()" ng-disabled="!uploader.isUploading">
            <i class="fa fa-ban"></i> Cancel all
          </button>
          <button type="button" class="btn btn-addon white" ng-click="uploader.clearQueue()" ng-disabled="!uploader.queue.length">
              <i class="fa fa-times"></i> Remove all
          </button>
          <p class="text-muted m-t">Note: upload.php file included.</p>
        </div>
      </div>
    </div>
</div>
