
<div class="modal" ng-controller="UploadUserPictureController">
    <div class="modal-dialog">
        <div class="modal-content">

            <div class="modal-header-wrapper">
                <div class="modal-header">
                    <button type="button" class="close" ng-click="$hide()">&times;</button>
                    <h2 class="modal-title">{{'IDM.PROFILE-MGMT.POPUP.UPLOAD-PICTURE-TITLE' | translate}}</h2>
                </div>
            </div>

            <div class="modal-body">
            
                <p>
                    <i class="glyphicon glyphicon-info-sign"></i>
                    {{'IDM.PROFILE-MGMT.POPUP.UPLOAD-PICTURE-DESCRIPTION' | translate}}
                </p>
            
                <div class="upload-image-form">
            
                    <input type="file" ngf-select="" ngf-change="onFileSelect($files)" style="font-size: smaller; padding-top:6px;" >
                    <div class="upload-image-dropbox"
                         ngf-drop ngf-change="onFileSelect($files)"
                         ngf-drag-over-class="dragover"
                         ng-show="dropSupported">
                        {{'IDM.PROFILE-MGMT.POPUP.UPLOAD-PICTURE-DROPZONE' | translate}}
                    </div>
                    <div ngf-drop-available="dropSupported=true"
                         ng-show="!dropSupported">{{'IDM.PROFILE-MGMT.POPUP.UPLOAD-PICTURE-NO-DROP' | translate}}</div>
                    <div class="graph-wrapper" ng-show="status.loading" style="margin: 10px 0 10px 0">
                        <div class="graph-bar" ng-style="{width: popup.uploadProgress + '%'}"></div>
                    </div>
                    <button class="btn btn-danger btn-sm"
                            ng-click="upload.abort()"
                            ng-disabled="!status.loading"
                            style="margin-bottom: 20px">
                        {{'IDM.PROFILE-MGMT.POPUP.UPLOAD-PICTURE-CANCEL-UPLOAD' | translate}}
                    </button>
            
                </div>
            
            </div>
            
            <div class="modal-footer-wrapper">
                <div class="modal-footer">
                    <span loading="popup.loading"></span>
                    <div class="pull-right" ng-if="popup.error">
                        <span>{{'IDM.PROFILE-MGMT.POPUP.UPLOAD-PICTURE-ERROR' | translate}} <span ng-if="popup.errorMessage"> : </span>{{popup.errorMessage}}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>