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

    <p ng-if="(renderModel|filter:{trashed:true}).length == 1"><localize key="contentPicker_pickedTrashedItem">You have picked a content item currently deleted or in the recycle bin</localize></p>
    <p ng-if="(renderModel|filter:{trashed:true}).length > 1"><localize key="contentPicker_pickedTrashedItems">You have picked content items currently deleted or in the recycle bin</localize></p>

    <ng-form name="contentPickerForm">

        <div ui-sortable="sortableOptions" ng-model="sortableModel">
            <umb-node-preview ng-repeat="node in renderModel track by node.id"
                              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="openEditor(node)">
            </umb-node-preview>
        </div>

        <button ng-show="model.config.multiPicker === true && renderModel.length < maxNumberOfItems || renderModel.length === 0 || !maxNumberOfItems"
                type="button"
                class="umb-node-preview-add"
                ng-click="openCurrentPicker()"
                id="{{model.alias}}"
                aria-label="{{model.label}}: {{labels.general_add}}">
            <localize key="general_add">Add</localize>
            <span class="sr-only">...</span>
        </button>

        <div class="umb-contentpicker__min-max-help" ng-if="model.config.multiPicker === true && (maxNumberOfItems > 1 || minNumberOfItems > 0) && (renderModel.length !== 0 || (model.validation && model.validation.mandatory))">

            <!-- Both min and max items -->
            <span ng-if="minNumberOfItems && maxNumberOfItems && minNumberOfItems !== maxNumberOfItems">
                <span ng-if="renderModel.length < maxNumberOfItems">Add between {{minNumberOfItems}} and {{maxNumberOfItems}} items</span>
                <span ng-if="renderModel.length > maxNumberOfItems">
                    <localize key="validation_maxCount">You can only have</localize> {{maxNumberOfItems}} <localize key="validation_itemsSelected"> items selected</localize>
                </span>
            </span>

            <!-- Equal min and max -->
            <span ng-if="minNumberOfItems && maxNumberOfItems && minNumberOfItems === maxNumberOfItems">
                <span ng-if="renderModel.length < maxNumberOfItems">Add {{minNumberOfItems - renderModel.length}} item(s)</span>
                <span ng-if="renderModel.length > maxNumberOfItems">
                    <localize key="validation_maxCount">You can only have</localize> {{maxNumberOfItems}} <localize key="validation_itemsSelected"> items selected</localize>
                </span>
            </span>

            <!-- Only max -->
            <span ng-if="!minNumberOfItems && maxNumberOfItems">
                <span ng-if="renderModel.length < maxNumberOfItems">Add up to {{maxNumberOfItems}} items</span>
                <span ng-if="renderModel.length > maxNumberOfItems">
                    <localize key="validation_maxCount">You can only have</localize> {{maxNumberOfItems}} <localize key="validation_itemsSelected">items selected</localize>
                </span>
            </span>

            <!-- Only min -->
            <span ng-if="minNumberOfItems && !maxNumberOfItems && renderModel.length < minNumberOfItems">
                Add at least {{minNumberOfItems}} item(s)
            </span>

        </div>

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

        <!--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 ng-messages="contentPickerForm.minCount.$error" show-validation-on-submit>
            <div class="help-inline" ng-message="minCount">
                <localize key="validation_minCount">You need to add at least</localize> {{minNumberOfItems}} <localize key="validation_items">items</localize>
            </div>
        </div>
        <div ng-messages="contentPickerForm.maxCount.$error" show-validation-on-submit>
            <div class="help-inline" ng-message="maxCount">
                <localize key="validation_maxCount">You can only have</localize> {{maxNumberOfItems}} <localize key="validation_itemsSelected">items selected</localize>
            </div>
        </div>

    </ng-form>

</div>
