<div
  class="umb-media-entry-editor"
  ng-controller="Umbraco.Editors.MediaEntryEditorController as vm"
>
  <ng-form name="vm.imageCropperForm" val-form-manager>
    <umb-editor-view umb-tabs ng-if="!page.loading">
      <umb-editor-header
        name="vm.title"
        name-required="false"
        name-locked="true"
        hide-alias="true"
        hide-icon="true"
        hide-description="true"
      >
      </umb-editor-header>

      <div class="umb-editor-container umb-panel-body umb-scrollable">
        <div ng-if="vm.media.trashed" class="umb-editor--trashed-message">
          <umb-icon icon="icon-trash" class="icon"></umb-icon>
          <localize key="content_nodeIsInTrash"
            >This item is in the Recycle Bin</localize
          >
        </div>

        <div class="umb-media-entry-editor__pane">
          <div class="umb-media-entry-editor__crops" ng-if="vm.isCroppable">
            <button
              class="btn-reset umb-outline"
              ng-class="{'--is-active':vm.currentCrop === null}"
              ng-click="vm.deselectCrop()"
            >
              <span class="__text">Media</span>
            </button>

            <button
              ng-repeat="crop in vm.mediaEntry.crops track by crop.alias"
              class="btn-reset umb-outline"
              ng-class="{'--is-active':vm.currentCrop.alias === crop.alias, '--is-defined':!!vm.currentCrop.coordinates}"
              ng-click="vm.selectCrop(crop)"
            >
              <umb-image-thumbnail
                center="vm.mediaEntry.focalPoint"
                crop="crop.coordinates"
                src="vm.imageSrc"
                height="{{crop.height}}"
                width="{{crop.width}}"
                max-size="75"
              >
              </umb-image-thumbnail>
              <span class="__text">{{crop.label}}</span>
            </button>
          </div>

          <div class="imagecropper umb-media-entry-editor__imagecropper">
            <div ng-if="vm.currentCrop" class="umb-cropper__container">
              <umb-image-crop
                height="{{vm.currentCrop.height}}"
                width="{{vm.currentCrop.width}}"
                crop="vm.currentCrop.coordinates"
                alias="{{vm.currentCrop.alias}}"
                force-update="{{vm.forceUpdateCrop}}"
                center="vm.mediaEntry.focalPoint"
                src="vm.imageSrc"
              >
                <button class="btn btn-link" ng-click="vm.resetCrop()">
                  <umb-icon icon="icon-wrong"></umb-icon>
                  <localize key="imagecropper_reset">Reset this crop</localize>
                </button>
              </umb-image-crop>
            </div>

            <div ng-if="!vm.currentCrop" class="umb-cropper-imageholder">
              <umb-image-gravity
                class="umb-media-entry-editor__imageholder"
                ng-if="vm.imageSrc"
                src="vm.imageSrc"
                center="vm.mediaEntry.focalPoint"
                disable-focal-point="!vm.model.enableFocalPointSetter"
                on-value-changed="vm.focalPointChanged(left, top)"
                on-image-loaded="vm.onImageLoaded(isCroppable, hasDimensions)"
              >
              </umb-image-gravity>

              <umb-media-preview
                ng-if="vm.loading === false && !vm.imageSrc"
                class="umb-media-entry-editor__previewholder"
                ng-class="{'trashed': vm.media.trashed}"
                extension="vm.fileExtension"
                source="vm.fileSrc"
                icon="vm.media.icon"
                name="vm.media.name"
              >
              </umb-media-preview>

              <div class="umb-media-entry-editor__imageholder-actions">
                <button ng-if="vm.mediaEntry.mediaKey" class="btn btn-link" ng-click="vm.repickMedia()">
                  <umb-icon icon="icon-wrong"></umb-icon>
                  <localize key="mediaPicker_changeMedia"
                    >Replace media</localize
                  >
                </button>
                <button ng-if="vm.mediaEntry.mediaKey" class="btn btn-link" ng-click="vm.openMedia()">
                  <umb-icon icon="icon-out"></umb-icon>
                  <localize key="mediaPicker_openMedia">Open media</localize>
                </button>
                <button
                  type="button"
                  ng-show="vm.model.enableFocalPointSetter && (vm.mediaEntry.focalPoint.left !== 0.5 && vm.mediaEntry.focalPoint.top !== 0.5)"
                  class="btn btn-link"
                  ng-click="vm.focalPointChanged(0.5, 0.5)"
                >
                  <umb-icon icon="icon-axis-rotation"></umb-icon>
                  <localize key="content_resetFocalPoint"
                    >Reset focal point</localize
                  >
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <umb-editor-footer>
        <!-- Missing breadcrumbs -->

        <umb-editor-footer-content-right>
          <umb-button
            action="vm.close()"
            shortcut="esc"
            button-style="link"
            label="{{vm.closeLabel}}"
            type="button"
          >
          </umb-button>

          <umb-button
            action="vm.submitAndClose()"
            button-style="primary"
            state="vm.saveButtonState"
            label="{{vm.submitLabel}}"
            type="button"
          >
          </umb-button>
        </umb-editor-footer-content-right>
      </umb-editor-footer>
    </umb-editor-view>
  </ng-form>
</div>
