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

    <ng-form name="imageCropperForm">

        <input type="hidden" name="modelValue" ng-model="model.value" />

        <umb-property-file-upload 
            culture="{{model.culture}}"
            segment="{{model.segment}}"
            property-alias="{{model.alias}}"
            value="model.value.src"
            required="model.validation.mandatory"
            on-files-selected="filesSelected(value, files)"
            on-files-changed="filesChanged(files)"
            on-init="fileUploaderInit(value, files)"
            hide-selection="true"
            accept-file-ext="acceptFileExt"
            ng-attr-readonly="{{ readonly || undefined }}">

            <div class="imagecropper clearfix">

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

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

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

                    </div>
                </div>

                <div ng-if="!currentCrop && !pendingCrop" class="umb-cropper-imageholder clearfix">
                    <umb-image-gravity 
                        src="imageSrc"
                        center="model.value.focalPoint"
                        on-value-changed="focalPointChanged(left, top)"
                        on-image-loaded="imageLoaded(isCroppable, hasDimensions)"
                        disable-focal-point="readonly">
                    </umb-image-gravity>

                    <div ng-if="!readonly" class="umb-cropper-imageholder-buttons">
                        <button type="button" class="btn btn-link btn-crop-delete" ng-click="clear()"><umb-icon icon="icon-delete" class="red"></umb-icon> <localize key="content_uploadClear">Remove file</localize></button>
                        <button type="button" class="sr-only" ng-click="vm.clear()"><localize key="content_uploadClearImageContext">Click here to remove the image from the media item</localize></button>
                        <button type="button" ng-show="(model.value.focalPoint.left !== 0.5 && model.value.focalPoint.top !== 0.5)" class="btn btn-link btn-gravity-reset" ng-click="focalPointChanged(0.5,0.5)">
                            <umb-icon icon="icon-axis-rotation"></umb-icon> <localize key="content_resetFocalPoint">Reset focal point</localize>
                        </button>
                    </div>
                </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)" ng-attr-disabled="{{ readonly || undefined }}">

                        <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}} &times; {{value.height}} px</span>
                            <span class="crop-annotation crop-text"><localize key="imagecropper_customCrop" ng-show="isCustomCrop(value)">User defined</localize>&nbsp;</span>
                        </div>
                    </li>
                </ul>

            </div>

        </umb-property-file-upload>

    </ng-form>

</div>
