<div ng-controller="Umbraco.PropertyEditors.ContentPickerController" class="umb-editor umb-contentpicker">

    <ng-form name="contentPickerForm">

        <div ui-sortable="sortableOptions" ng-model="renderModel">
            <umb-node-preview
                ng-repeat="node in renderModel"
                icon="node.icon"
                name="node.name"
                published="node.published"
                description="node.url"
                sortable="!sortableOptions.disabled"
                allow-remove="allowRemoveButton"
                allow-open="model.config.showOpenButton && allowOpenButton && !dialogEditor"
                on-remove="remove($index)"
                on-open="openMiniEditor(node)">
            </umb-node-preview>
        </div>
 
        <a ng-show="model.config.multiPicker === true || renderModel.length === 0"
            class="umb-node-preview-add"
            href=""
            ng-click="openContentPicker()"
            prevent-default>
            <localize key="general_add">Add</localize>
        </a>

        <!--These are here because we need ng-form fields to validate against-->
        <input type="hidden" name="minCount" ng-model="renderModel" />
        <input type="hidden" name="maxCount" ng-model="renderModel" />

        <div class="help-inline" val-msg-for="minCount" val-toggle-msg="minCount">
            <localize key="validation_minCount">You need to add at least</localize> {{model.config.minNumber}} <localize key="validation_items">items</localize>
        </div>

        <div class="help-inline" val-msg-for="maxCount" val-toggle-msg="maxCount">
            <localize key="validation_maxCount">You can only have</localize> {{model.config.maxNumber}} <localize key="validation_itemsSelected">items selected</localize>
        </div>

    </ng-form>

    <umb-overlay
      ng-if="contentPickerOverlay.show"
      model="contentPickerOverlay"
      view="contentPickerOverlay.view"
      position="right">
    </umb-overlay>

</div>
