<form ng-controller="Umbraco.Dialogs.MediaPickerController" id="fileupload"
      method="POST"
      enctype="multipart/form-data"
      umb-image-upload="options">

    <div class="umb-panel umb-dialogs-mediapicker" ng-if="target">
        <div class="umb-panel-body no-header with-footer compact">
            <umb-pane>

                <umb-control-group ng-if="target.url">

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

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


                </umb-control-group>

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

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

        <div class="umb-panel-footer">
            <div class="umb-el-wrap umb-panel-buttons">
                <div class="btn-toolbar umb-btn-toolbar pull-right">
                    <a href ng-click="exitDetails()" class="btn btn-link">
                        <localize key="general_cancel">Cancel</localize>
                    </a>

                    <button class="btn btn-primary"
                            ng-click="submit(target)">
                        <localize key="general_insert">Insert</localize>
                    </button>
                </div>
            </div>
        </div>
    </div>


    <div class="umb-panel umb-dialogs-mediapicker browser"
          on-drag-leave="dragLeave()"
          on-drag-end="dragLeave()"
          on-drag-enter="dragEnter()" 
          ng-hide="target">

          
        <div class="umb-panel-header">

            <div class="umb-el-wrap umb-panel-buttons umb-mediapicker-upload">
	            <div class="form-search">
	                <i class="icon-search"></i>
	                <input type="text"
	                       ng-model="searchTerm"
	                       class="umb-search-field search-query"
                          localize="placeholder"
	                       placeholder="@placeholders_filter">
                </div>

                <div class="upload-button">
                    <button class="btn fileinput-button" ng-click="upload()" ng-class="{disabled: disabled}">
                        <i class="icon-page-up"></i>
                        <localize key="general_upload">Upload</localize>
                    </button>
                </div>

            </div>

            <div class="row">
                <ul class="breadcrumb span12">
                    <li ng-hide="startNodeId != -1">
                        <a href ng-click="gotoFolder()" prevent-default>Media</a> /
                    </li>

                    <li ng-repeat="item in path">
                        <a href ng-click="gotoFolder(item)" prevent-default>{{item.name}}</a> /
                    </li>
 
                    <li>
                        <a href ng-hide="showFolderInput" ng-click="showFolderInput = true">
                            <i class="icon icon-add small"></i>
                        </a>

                        <input type="text"
                               class="input-foldername input-mini inline"
                               ng-show="showFolderInput"
                               ng-model="newFolderName"
                               ng-keydown="submitFolder($event)"
                               on-blur="showFolderInput = false"
                               focus-when="{{showFolderInput}}">
                    </li>
                </ul>
            </div>
        </div>
  

        <div class="umb-panel-body with-footer">
                       
            <umb-file-dropzone 
                ng-if="acceptedMediatypes.length > 0"
                accepted-mediatypes="acceptedMediatypes"
                hide-dropzone="{{!activeDrag && images.length > 0}}" 
                parent-id="{{currentFolder.id}}"
                files-uploaded="onUploadComplete"
                files-queued="onFilesQueue">
            </umb-file-dropzone>

            <umb-photo-folder 
                min-height="105"
                min-width="150"
                max-height="250"
                ideal-items-per-row="3"
                on-click="clickHandler"
                ng-model="images"
                images-only="{{onlyImages}}"
                filter-by="searchTerm" />
        </div>


        <div class="umb-panel-footer">
            <div class="umb-el-wrap umb-panel-buttons">
                <div class="btn-toolbar umb-btn-toolbar pull-right">

                    <a href ng-click="close()" class="btn btn-link">
                        <localize key="general_cancel">Cancel</localize>
                    </a>

                    <button class="btn btn-primary"
                            ng-show="multiPicker"
                            ng-click="submit(dialogData.selection)">
                        <localize key="buttons_select">Select</localize>({{dialogData.selection.length}})
                    </button>

                </div>
            </div>
        </div>

    </div>

</form>
