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

    <div ng-if="vm.showSampleDataCTA" class="__get-sample-box">
        <h3><localize key="blockEditor_getSampleHeadline">Install Sample Configuration</localize></h3>
        <localize key="blockEditor_getSampleDescription">This will add basic Blocks and help you get started with the Block Grid Editor. You'll get Blocks for Headline, Rich Text, Image, as well as a Two Column Layout.</localize>
        <umb-button action="vm.setupSample()" button-style="primary" state="vm.sampleButtonState" label-key="blockEditor_getSampleButton" type="button"></umb-button>
    </div>

    
    <div class="umb-block-card-group">

        <div class="umb-block-card-grid" ui-sortable="vm.blockSortableOptions" ng-model="model.value">

            <umb-block-card
                ng-repeat="block in model.value track by block.contentElementTypeKey"
                ng-show="block.groupKey === null"
                block-config-model="block"
                element-type-model="vm.getElementTypeByKey(block.contentElementTypeKey)"
                ng-class="{'--isOpen':vm.openBlock === block}"
                ng-click="vm.openBlockOverlay(block)"
                data-content-element-type-key="{{block.contentElementTypeKey}}">
                <div class="__actions">
                    <button ng-if="block.areas.length > 0" type="button" class="btn-reset __action umb-outline" ng-click="vm.openBlockOverlay(block, true); $event.stopPropagation();">
                        <umb-icon icon="icon-layout" class="icon"></umb-icon>
                        <localize key="blockEditor_tabAreas" class="sr-only">Areas</localize>
                    </button>
                    <button type="button" class="btn-reset __action umb-outline" ng-click="vm.requestRemoveBlockByIndex($index); $event.stopPropagation();">
                        <umb-icon icon="icon-trash" class="icon"></umb-icon>
                        <localize key="general_delete" class="sr-only">Delete</localize>
                    </button>
                </div>
            </umb-block-card>

            <uui-button id="{{model.alias}}" look="{{(model.value.length === 0 && vm.blockGroups.length === 0) ? 'primary' : 'placeholder'}}" color="primary" ng-click="vm.openAddDialog()">
                <localize key="blockEditor_addBlockType">Add Block</localize>
            </uui-button>

            <uui-button ng-if="!vm.showSampleDataCTA && model.value.length === 0 && vm.blockGroups.length === 0" look="placeholder" color="primary" ng-click="vm.setupSample()">
                <localize key="blockEditor_getSampleHeadline">Install demo Blocks</localize>
            </uui-button>

        </div>

    </div>

    <div ui-sortable="vm.groupSortableOptions" ng-model="vm.blockGroups">
        <div class="umb-block-card-group" ng-repeat="blockGroup in vm.blockGroups track by blockGroup.key">


            <div class="__controls">
                <div class="__handle"><umb-icon icon="icon-navigation"></umb-icon></div>
                
                <input class="__title" title="group name" type="text" ng-model="blockGroup.name"/>

                <button 
                    type="button" 
                    class="btn-reset umb-outline __remove"
                    localize="title"
                    title="actions_delete"
                    ng-click="vm.requestRemoveGroup(blockGroup);"
                    ng-disabled="vm.disabled">
                    <umb-icon icon="icon-trash" class="icon"></umb-icon>
                    <span class="sr-only">
                        <localize key="actions_delete">Delete</localize>
                    </span>
                </button>
            </div>

            <div class="umb-block-card-grid" ui-sortable="vm.blockSortableOptions" ng-model="model.value" data-group-key="{{blockGroup.key}}">

                <umb-block-card 
                    ng-repeat="block in model.value track by block.contentElementTypeKey"
                    ng-show="block.groupKey === blockGroup.key"
                    block-config-model="block"
                    element-type-model="vm.getElementTypeByKey(block.contentElementTypeKey)"
                    ng-class="{'--isOpen':vm.openBlock === block}"
                    ng-click="vm.openBlockOverlay(block)"
                    data-content-element-type-key="{{block.contentElementTypeKey}}">
                    <div class="__actions">
                        <button ng-if="block.areas.length > 0" type="button" class="btn-reset __action umb-outline" ng-click="vm.openBlockOverlay(block, true); $event.stopPropagation();">
                            <umb-icon icon="icon-layout" class="icon"></umb-icon>
                            <localize key="blockEditor_tabAreas" class="sr-only">Areas</localize>
                        </button>
                        <button type="button" class="btn-reset __action umb-outline" ng-click="vm.requestRemoveBlockByIndex($index); $event.stopPropagation();">
                            <umb-icon icon="icon-trash" class="icon"></umb-icon>
                            <localize key="general_delete" class="sr-only">Delete</localize>
                        </button>
                    </div>
                </umb-block-card>

                <uui-button id="{{model.alias}}" look="placeholder" color="primary" ng-click="vm.openAddDialog(blockGroup.key)">
                    <localize key="blockEditor_addBlockType">Add Block</localize>
                </uui-button>
            </div>

        </div>
    </div>

</div>
