<div ng-controller="Umbraco.Editors.MediaPickerController as vm">
<umb-editor-view >

    <umb-editor-header
        name="model.title"
        name-locked="true"
        hide-alias="true"
        hide-icon="true"
        hide-description="true">
    </umb-editor-header>

    <umb-editor-container>

        <form id="fileupload" method="POST" enctype="multipart/form-data" umb-image-upload="options">

            <div on-drag-leave="dragLeave()" on-drag-end="dragLeave()" on-drag-enter="dragEnter()">

                <div class="umb-control-group umb-mediapicker-upload">

                    <umb-load-indicator
                        ng-if="loading">
                    </umb-load-indicator>

                    <div class="form-search">
                        <i class="icon-search"></i>
                        <input class="umb-search-field search-query -full-width-input"
                               ng-model="searchOptions.filter"
                               localize="placeholder"
                               placeholder="@placeholders_search"
                               ng-change="changeSearch()"
                               type="text"
                               no-dirty-check />

                        <div class="form-search__toggle">
                            <label>
                                <input type="checkbox" ng-model="showChilds" ng-change="toggle()" />
                                <localize key="general_includeFromsubFolders">Include subfolders in search</localize>
                            </label>
                        </div>
                    </div>

                    <div class="upload-button">
                        <umb-button
                            type="button"
                            label-key="general_upload"
                            action="upload()"
                            disabled="lockedFolder"
                            button-style="action">
                        </umb-button>
                    </div>

                </div>

                <div class="row umb-control-group" ng-show="!searchOptions.filter">
                    <ul class="umb-breadcrumbs">
                        <li ng-hide="startNodeId != -1" class="umb-breadcrumbs__ancestor">
                            <a href ng-click="gotoFolder()" prevent-default>Media</a>
                            <span class="umb-breadcrumbs__separator">&#47;</span>
                        </li>

                        <li ng-repeat="item in path" class="umb-breadcrumbs__ancestor">
                            <a href ng-click="gotoFolder(item)" prevent-default>{{item.name}}</a>
                            <span class="umb-breadcrumbs__separator">&#47;</span>
                        </li>

                        <li class="umb-breadcrumbs__ancestor" ng-show="!lockedFolder">
                            <a href ng-hide="model.showFolderInput" ng-click="model.showFolderInput = true">
                                <i class="icon icon-add small"></i>
                            </a>

                            <input type="text" class="umb-breadcrumbs__add-ancestor" ng-show="model.showFolderInput" ng-model="model.newFolderName" ng-keydown="enterSubmitFolder($event)"
                                ng-blur="submitFolder()" focus-when="{{model.showFolderInput}}" />
                        </li>
                    </ul>
                    <div class="umb-loader" ng-if="model.creatingFolder"></div>
                </div>

                <umb-file-dropzone
                    ng-if="acceptedMediatypes.length > 0 && !loading && !lockedFolder"
                    accepted-mediatypes="acceptedMediatypes"
                    parent-id="{{currentFolder.id}}"
                    files-uploaded="onUploadComplete"
                    files-queued="onFilesQueue"
                    accept="{{acceptedFileTypes}}"
                    max-file-size="{{maxFileSize}}"
                    hide-dropzone="{{!activeDrag && images.length > 0 || searchOptions.filter }}"
                    compact="{{ images.length > 0 }}">
                </umb-file-dropzone>

                <umb-media-grid
                        ng-if="!loading"
                        items="images"
                        on-click="clickHandler"
                        on-click-name="clickItemName"
                        on-click-edit="editMediaItem(item)"
                        allow-on-click-edit="{{allowMediaEdit}}"
                        item-max-width="150"
                        item-max-height="150"
                        item-min-width="100"
                        item-min-height="100"
                        only-images={{onlyImages}}
                        include-sub-folders={{showChilds}}
                        current-Folder-id="{{currentFolder.id}}">
                </umb-media-grid>

                <div class="flex justify-center">
                    <umb-pagination
                        ng-if="searchOptions.totalPages > 0 && !loading"
                        page-number="searchOptions.pageNumber"
                        total-pages="searchOptions.totalPages"
                        on-change="changePagination(pageNumber)">
                    </umb-pagination>
                </div>

                <umb-empty-state ng-if="searchOptions.filter && images.length === 0 && !loading" position="center">
                    <localize key="general_searchNoResult"></localize>
                </umb-empty-state>

            </div>

            <umb-overlay ng-if="mediaPickerDetailsOverlay.show" model="mediaPickerDetailsOverlay" position="right">

                <div class="umb-control-group">

                    <div ng-if="target.url">
                        <umb-image-gravity
                            src="target.url"
                            center="target.focalPoint">
                        </umb-image-gravity>
                    </div>

                    <div ng-if="cropSize">

                        <h5>
                            <localize key="general_preview">Preview</localize>
                        </h5>

                        <umb-image-thumbnail center="target.focalPoint" src="target.url" height="{{cropSize.height}}" width="{{cropSize.width}}"
                            max-size="400">
                        </umb-image-thumbnail>

                    </div>

                </div>

                <div class="umb-control-group">
                    <label>
                        <localize key="@general_url"></localize>
                    </label>
                    <input type="text" localize="placeholder" placeholder="@general_url" class="umb-property-editor umb-textstring" ng-model="target.url"
                        ng-disabled="target.id" />
                </div>

                <div class="umb-control-group">
                    <label>
                        <localize key="@content_altTextOptional"></localize>
                    </label>
                    <input type="text" class="umb-property-editor umb-textstring" ng-model="target.altText" />
                </div>


            </umb-overlay>

        </form>

    </umb-editor-container>

    <umb-editor-footer>
        <umb-editor-footer-content-right>

            <umb-button
                action="close()"
                button-style="link"
                shortcut="esc"
                label-key="general_close"
                type="button">
            </umb-button>

            <umb-button
                button-style="success"
                label-key="buttons_select"
                type="button"
                disabled="model.selection.length === 0"
                action="submit(model)">
            </umb-button>

        </umb-editor-footer-content-right>
    </umb-editor-footer>

</umb-editor-view>

</div>
