<div class="umb-property-file-upload">

    <ng-form name="vm.fileUploadForm">

        <div class="fileinput-button umb-upload-button-big"
             style="margin-bottom: 5px;"
             ng-hide="vm.files.length > 0">
            <i class="icon icon-page-up"></i>
            <p><localize key="media_clickToUpload">Click to upload</localize></p>
            <umb-single-file-upload></umb-single-file-upload>
        </div>
        
        <div ng-if="vm.files.length > 0">
            <div ng-if="!vm.hideSelection">

                <div class="umb-fileupload clearfix" ng-repeat="file in vm.files">

                    <div class="" ng-if="file.isImage || file.extension == 'svg'">
                        <div class="gravity-container">
                            <div class="viewport">
                                <img ng-if="file.isClientSide" ng-src="{{file.fileSrc}}" style="max-width: 100%; max-height: 100%" alt="{{file.fileName}}"/>
                                <a ng-if="!file.isClientSide" href="{{file.fileSrc}}" target="_blank">
                                    <img ng-src="{{file.fileSrc}}" style="max-width: 100%; max-height: 100%" alt="{{file.fileName}}" />
                                </a>
                            </div>
                        </div>
                    </div>

                    <div ng-if="!file.isImage && file.extension != 'svg'">
                        <a class="span6 thumbnail tc" ng-show="!file.isClientSide" ng-href="{{file.fileName}}" target="_blank">
                            <span class="file-icon-wrap">
                                <span class="file-icon">
                                    <i class="icon icon-document"></i>
                                    <span>.{{file.extension}}</span>
                                </span>
                            </span>
                            <div>{{file.fileName}}</div>
                        </a>
                        <div class="span6 thumbnail tc" ng-show="file.isClientSide">
                            <span class="file-icon-wrap">
                                <span class="file-icon">
                                    <i class="icon icon-document"></i>
                                    <span>.{{file.extension}}</span>
                                </span>
                            </span>
                            <div>{{file.fileName}}</div>
                        </div>
                    </div>
                </div>

                <div>
                    <a href class="btn btn-link btn-crop-delete" ng-click="vm.clear()"><i class="icon-delete red"></i> <localize key="content_uploadClear">Remove file</localize></a>
                </div>

            </div>
            <div ng-if="vm.hideSelection">
                <div ng-transclude></div>
            </div>
        </div>

    </ng-form>
</div>
