<div id="umb-nested-content--{{model.id}}" class="umb-nested-content"
     ng-controller="Umbraco.PropertyEditors.NestedContent.PropertyEditorController"
     ng-class="{'umb-nested-content--narrow':!wideMode, 'umb-nested-content--wide':wideMode}">

    <umb-load-indicator ng-if="!inited"></umb-load-indicator>

    <ng-form ng-if="inited">

        <div class="umb-nested-content__items" ng-hide="nodes.length === 0" ui-sortable="sortableOptions" ng-model="nodes">

            <div class="umb-nested-content__item" ng-repeat="node in nodes" ng-class="{ 'umb-nested-content__item--active' : $parent.realCurrentNode.key === node.key, 'umb-nested-content__item--single' : $parent.singleMode }">

                <div class="umb-nested-content__header-bar" ng-click="$parent.editNode($index)" ng-hide="$parent.singleMode">

                    <div class="umb-nested-content__heading"><i ng-if="showIcons" class="icon" ng-class="$parent.getIcon($index)"></i><span class="umb-nested-content__item-name" ng-class="{'--has-icon': showIcons}" ng-bind="$parent.getName($index)"></span></div>

                    <div class="umb-nested-content__icons">
                        <a class="umb-nested-content__icon umb-nested-content__icon--copy" title="{{copyIconTitle}}" ng-click="clickCopy($event, node);" ng-if="showCopy" prevent-default>
                            <i class="icon icon-documents"></i>
                        </a>
                        <a class="umb-nested-content__icon umb-nested-content__icon--delete" localize="title" title="general_delete" ng-class="{ 'umb-nested-content__icon--disabled': $parent.nodes.length <= $parent.minItems }" ng-click="$parent.requestDeleteNode($index); $event.stopPropagation();" prevent-default>
                            <i class="icon icon-trash"></i>
                        </a>
                    </div>

                </div>

                <div class="umb-nested-content__content" ng-if="$parent.realCurrentNode.key === node.key && !$parent.sorting">
                    <umb-nested-content-editor ng-model="node" tab-alias="ncTabAlias" />
                </div>
            </div>

        </div>

        <div ng-hide="hasContentTypes">
            <div class="umb-nested-content__help-text">
                <localize key="content_nestedContentNoContentTypes"></localize>
            </div>
        </div>

        <div class="umb-nested-content__footer-bar" ng-hide="hasContentTypes === false || nodes.length >= maxItems">
            <a href class="umb-nested-content__add-content" ng-class="{ '--disabled': !scaffolds.length }" ng-click="openNodeTypePicker($event)" prevent-default>
                <localize key="grid_addElement"></localize>
            </a>
        </div>

    </ng-form>

    <umb-overlay
        ng-if="overlayMenu.show"
        position="target"
        size="overlayMenu.size"
        view="overlayMenu.view"
        model="overlayMenu">
    </umb-overlay>

</div>
