<div class="d-uploads-dialog-title">
    Uploads Files List
</div>

<!-- https://medium.com/codingthesmartway-com-blog/angular-material-part-2-popups-modals-1ed0c2405f18 -->

<md-dialog-content>

    <div class="col-md-12" style="text-align:center;margin-top:25px;margin-bottom:25px;">

        <!-- <input type="file" class="btn btn-success" ng2FileSelect [uploader]="uploader" /> -->

        <div class="upload-btn-wrapper" (click)="$event.stopPropagation()">
            <button class="btnUpload">Upload File</button>
            <input type="file" ng2FileSelect [uploader]="uploader" />
        </div>

    </div>


    <!-- <p>File Caricati: {{ uploader?.queue?.length }}</p> -->

    <table class="table">
        <thead>
            <tr>
                <th width="50%">Name</th>
                <th>Size</th>
                <th>Progress</th>
                <th>Status</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let item of uploader.queue">
                <td>
                    <strong>{{ item?.file?.name }}</strong>
                </td>
                <td *ngIf="uploader.isHTML5" nowrap>{{ item?.file?.size/1024/1024 | number:'.2' }} MB</td>
                <td *ngIf="uploader.isHTML5">
                    <div class="progress" style="margin-bottom: 0;">
                        <div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': item.progress + '%' }"></div>
                    </div>
                </td>
                <td class="text-center">
                    <span *ngIf="item.isSuccess">
                        <i class="glyphicon glyphicon-ok"></i>
                    </span>
                    <span *ngIf="item.isError">
                        <i class="glyphicon glyphicon-remove"></i>
                    </span>
                </td>
                <td nowrap>
                    <button type="button" class="btn btn-danger btn-xs" (click)="item.remove()">
                        <span class="glyphicon glyphicon-trash"></span> Remove
                    </button>
                </td>
            </tr>
        </tbody>

    </table>
    <div>
        <div>
            Queue progress:
            <div class="progress" style="">
                <div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': uploader.progress + '%' }"></div>
            </div>
        </div>
    </div>
</md-dialog-content>

<div class="d-uploads-dialog-footer">
    <button md-button color="primary" (click)="onCloseConfirm()" class="btn-uploads-dialog">
        <i class="material-icons">&#xE161;</i>
        <br/> Save
    </button>
    <button md-button color="primary" class="btn-uploads-dialog" (click)="onCloseCancel()">
        <i class="material-icons">&#xE5CD;</i>
        <br/>Cancel</button>
</div>