<div class="umb-editor umb-mediapicker"
     ng-controller="Umbraco.PropertyEditors.ImageCropperController">

    <span class="fileinput-button umb-upload-button-big"
          style="margin-bottom: 5px;"
          ng-hide="imageSrc">
        <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>
    </span>


    <div ng-if="imageSrc">


        <div class="imagecropper clearfix">

            <div ng-if="currentCrop" style="float:left; max-width: 100%;" class="clearfix">
                <div class="umb-cropper__container">

                    <div>
                        <umb-image-crop height="{{currentCrop.height}}"
                                        width="{{currentCrop.width}}"
                                        crop="currentCrop.coordinates"
                                        center="model.value.focalPoint"
                                        max-size="450"
                                        src="imageSrc">
                        </umb-image-crop>
                    </div>

                    <div class="button-drawer">
                        <button class="btn btn-link" ng-click="reset()"><localize key="imagecropper_reset">Reset this crop</localize></button>
                        <button class="btn" ng-click="close()"><localize key="imagecropper_undoEditCrop">Undo edits</localize></button>
                        <button class="btn btn-success" ng-click="done()"><localize key="imagecropper_updateEditCrop">Done</localize></button>
                    </div>
                </div>
            </div>

            <div ng-if="!currentCrop" class="umb-cropper-imageholder clearfix">
                <umb-image-gravity
                    src="imageSrc"
                    center="model.value.focalPoint"
                    on-image-loaded="imageLoaded(isCroppable, hasDimensions)"
                    on-gravity-changed="focalPointChanged()">
                </umb-image-gravity>
                <a href class="btn btn-link btn-crop-delete" ng-click="clear()"><i class="icon-delete red"></i> <localize key="content_uploadClear">Remove file</localize></a>
            </div>

            <ul ng-if="isCroppable" class="umb-sortable-thumbnails cropList clearfix">
                <li ng-repeat=" (key,value) in model.value.crops" ng-class="{'current':currentCrop.alias === value.alias}" ng-click="crop(value)">

                    <umb-image-thumbnail center="model.value.focalPoint"
                                         crop="value.coordinates"
                                         src="imageSrc"
                                         height="{{value.height}}"
                                         width="{{value.width}}"
                                         max-size="75">
                     </umb-image-thumbnail>

                    <div class="crop-information">
                        <span class="crop-name crop-text">{{value.alias}}</span>
                        <span class="crop-size crop-text">{{value.width}}px x {{value.height}}px</span>
                    </div>
                </li>
            </ul>


        </div>

    </div>
</div>
