<div ng-controller="Umbraco.PropertyEditors.MacroContainerController" class="umb-editor umb-macrocontainer">

    <div ui-sortable="sortableOptions" ng-model="renderModel">
        <div ng-repeat="macro in renderModel">
            <umb-node-preview
                name="macro.macroAlias"
                icon="macro.icon"
                description="macro.details"
                sortable="!sortableOptions.disabled"
                allow-remove="allowRemoveButton"
                allow-open="allowOpenButton && macro.details"
                on-remove="remove($index)"
                on-open="edit($index)">
            </umb-node-preview>
        </div>
    </div>

    <a ng-hide="model.config.max && model.config.max > 0 && renderModel.length >= model.config.max"
        class="umb-node-preview-add"
        href=""
        ng-click="add()"
        prevent-default>
        <localize key="general_add">Add</localize>
    </a>

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