<div>

    <umb-load-indicator ng-if="vm.loading"></umb-load-indicator>

    <div class="umb-block-grid__wrapper" ng-style="vm.editorWrapperStyles">

        <umb-editor-sub-header ng-if="vm.sortMode" appearance="blue">
            <umb-editor-sub-header-content-right>
                <umb-button
                    type="button"
                    icon="icon-delete"
                    button-style="primary"
                    label-key="blockEditor_actionExitSortMode"
                    action="vm.exitSortMode()">
                </umb-button>
            </umb-editor-sub-header-content-right>
        </umb-editor-sub-header>

        <div ng-show="vm.loading !== true">

            <umb-block-grid-root
                grid-columns="{{::vm.gridColumns}}"
                create-label="{{::vm.createLabel}}"
                stylesheet="{{::vm.layoutStylesheet}}"
                block-editor-api="vm.blockEditorApi"
                property-editor-form="vm.propertyForm"
                entries="vm.layout"
                loading="vm.loading"
                >
            </umb-block-grid-root>

        </div>
        
        <input type="hidden" name="minCount" ng-model="vm.layout" val-server="minCount" />
        <input type="hidden" name="maxCount" ng-model="vm.layout" val-server="maxCount" />

        <div ng-messages="vm.propertyForm.minCount.$error">
            <div class="help text-error" ng-message="minCount">
                <localize key="validation_entriesShort" tokens="[vm.validationLimit.min, vm.validationLimit.min - vm.layout.length]" watch-tokens="true">Minimum %0% entries, needs <strong>%1%</strong> more.</localize>
            </div>
            <span class="help-inline" ng-message="valServer" ng-bind-html="vm.propertyForm.minCount.errorMsg">></span>
        </div>
        <div ng-messages="vm.propertyForm.maxCount.$error">
            <div class="help text-error" ng-message="maxCount">
                <localize key="validation_entriesExceed" tokens="[vm.validationLimit.max, vm.layout.length - vm.validationLimit.max]" watch-tokens="true">Maximum %0% entries, <strong>%1%</strong> too many.</localize>
            </div>
            <span class="help-inline" ng-message="valServer" ng-bind-html="vm.propertyForm.maxCount.errorMsg"></span>
        </div>
        

    </div>

</div>
