<div class="umb-block-list-block-configuration" ng-controller="Umbraco.PropertyEditors.BlockList.BlockConfigurationController as vm">

    <div class="umb-block-card-grid" ui-sortable="vm.sortableOptions" ng-model="model.value">
        
        <umb-block-card
            block-config-model="block"
            element-type-model="vm.getElementTypeByKey(block.contentElementTypeKey)"
            ng-repeat="block in model.value"
            ng-class="{'--isOpen':vm.openBlock === block}"
            ng-click="vm.openBlockOverlay(block)">
            <div class="__actions" ng-click="$event.stopPropagation()" tabindex="-1">
                <button type="button"
                        class="btn-reset __action umb-outline"
                        ng-click="vm.requestRemoveBlockByIndex($index, $event)">
                    <umb-icon icon="icon-trash" class="icon"></umb-icon>
                    <localize key="general_delete" class="sr-only">Delete</localize>
                </button>
            </div>
        </umb-block-card>

        <button type="button" id="{{model.alias}}" class="btn-reset __add-button" ng-click="vm.openAddDialog($event)">
            <localize key="general_add">Add</localize>
        </button>
    </div>
</div>
