<div class="umb-block-grid-area-editor">

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

<div ng-if="vm.loading === false"
        class="umb-block-grid-area-editor__grid-wrapper"
        style="--umb-block-grid--block-grid-columns: {{vm.block.areaGridColumns || vm.rootLayoutColumns}}"
        umb-block-grid-sorter="::vm.sorterOptions"
        umb-block-grid-sorter-model="vm.model">

        <umb-block-grid-configuration-area-entry ng-repeat="area in vm.model track by area.key"
            class="umb-block-grid-area-editor__area"
            ng-class="{'--isOpen':vm.openArea === area}"
            data-area-key="{{area.key}}"
            data-col-span="{{area.columnSpan}}"
            data-row-span="{{area.rowSpan}}"
            style="
            --umb-block-grid--grid-column: {{area.columnSpan}};
            --umb-block-grid--area-column-span: {{area.columnSpan}};
            --umb-block-grid--area-row-span: {{area.rowSpan}};
            "
            area="area"
            ng-click="vm.editArea(area)"
            on-edit="vm.editArea(area)"
            on-delete="vm.requestDeleteArea(area)"
        >
        </umb-block-grid-configuration-area-entry>

    </div>

    <button
        type="button"
        ng-disabled="vm.disabled"
        class="btn-reset umb-block-grid-area-editor__create-button umb-outline"
        ng-click="vm.onNewAreaClick()">
        <localize key="general_add">Add</localize>
    </button>

</div>



