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

    <form novalidate name="blockGridBlockConfigurationForm" val-form-manager>
        <umb-editor-view ng-if="!page.loading">

            <umb-editor-header
                name="model.title"
                navigation="vm.navigation"
                on-select-navigation-item="vm.onNavigationChanged(item)"
                name-locked="true"
                hide-alias="true"
                hide-icon="true"
                hide-description="true">
            </umb-editor-header>

            <umb-editor-container>

                <div ng-if="vm.activeTab.alias === 'block'" class="form-vertical umb-block-grid-block-configuration-layout">

                    <div class="umb-group-panel umb-block-grid-block-configuration__umb-group-panel">

                        <div class="umb-group-panel__header">
                            <localize key="general_General">General</localize>
                        </div>

                        <div class="umb-group-panel__content">

                            <!-- label -->
                            <div class="control-group umb-control-group -no-border">
                                <div class="umb-el-wrap">
                                    <label class="control-label" for="label"><localize key="blockEditor_labelLabelTemplate">label</localize></label>
                                    <div class="controls">
                                        <input type="text" name="label" ng-model="vm.block.label" style="width:100%"/>
                                    </div>
                                </div>
                            </div>

                            <!-- Content Element Type -->
                            <div class="control-group umb-control-group -no-border">
                                <div class="umb-el-wrap">
                                    <label class="control-label"><localize key="blockEditor_labelContentElementType">Content ElementType</localize></label>
                                    <div class="controls">
                                        <div class="__settings-input --hasValue" ng-if="vm.block.contentElementTypeKey !== null" >
                                            <umb-node-preview icon="vm.contentPreview.icon" name="vm.contentPreview.name" alias="vm.contentPreview.alias"></umb-node-preview>
                                            <div class="__control-actions">
                                                <button type="button" class="btn-reset __control-actions-btn --open umb-outline" ng-click="vm.openElementType(vm.block.contentElementTypeKey)">
                                                    <umb-icon icon="icon-edit" class="icon"></umb-icon>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Settings Element Type -->
                            <div class="control-group umb-control-group -no-border">
                                <div class="umb-el-wrap">
                                    <label class="control-label"><localize key="blockEditor_labelSettingsElementType">Settings Element Type</localize></label>
                                    <div class="controls">
                                        <div class="__settings-input --hasValue" ng-if="vm.block.settingsElementTypeKey !== null">
                                            <umb-node-preview icon="vm.settingsPreview.icon" name="vm.settingsPreview.name" alias="vm.settingsPreview.alias"></umb-node-preview>
                                            <div class="__control-actions">
                                                <button type="button" class="btn-reset __control-actions-btn --open umb-outline" ng-click="vm.openElementType(vm.block.settingsElementTypeKey)">
                                                    <umb-icon icon="icon-edit" class="icon"></umb-icon>
                                                </button>
                                                <button type="button" class="btn-reset __control-actions-btn --remove umb-outline" ng-click="vm.requestRemoveSettingsForBlock(vm.block)">
                                                    <umb-icon icon="icon-wrong" class="icon"></umb-icon>
                                                </button>
                                            </div>
                                        </div>
                                        <button type="button" class="btn-reset __settings-input --noValue --hideText umb-outline" ng-if="vm.block.settingsElementTypeKey === null" ng-click="vm.addSettingsForBlock($event, vm.block)">
                                            <localize key="blockEditor_addSettingsElementType">Add settings</localize>
                                        </button>
                                    </div>
                                </div>
                            </div>

                        </div>

                    </div>


                    

                    <div class="umb-group-panel umb-block-grid-block-configuration__umb-group-panel">

                        <div class="umb-group-panel__header">
                            <div>
                                <localize key="blockEditor_sizeOptions">Size options</localize>
                                <umb-property-info-button button-title-key="general_readMore">
                                    <localize key="blockEditor_sizeOptionsHelp">Define one or more size options, this enables resizing of the Block</localize>
                                </umb-property-info-button>
                            </div>
                        </div>

                        <div class="umb-group-panel__content">

                            <button ng-if="!vm.showSizeOptions" type="button" class="btn-reset __settings-input --noValue umb-outline" style="height: 80px;" ng-click="vm.showSizeOptions = true">
                                <localize key="blockEditor_showSizeOptions">Show size options</localize>
                            </button>

                            <!-- Column span options -->
                            <div ng-if="vm.showSizeOptions" class="control-group umb-control-group -no-border">
                                <div class="umb-el-wrap">
                                    <label class="control-label" for="addNewColumnSpan"><localize key="blockEditor_allowedBlockColumns">Available column spans</localize></label>
                                    <umb-property-info-button button-title-key="general_readMore">
                                        <localize key="blockEditor_allowedBlockColumnsHelp">Define the different number of layout columns this block is allowed to span across.</localize>
                                    </umb-property-info-button>
                                    <div class="controls">
                                        <umb-block-grid-column-editor model="vm.block.columnSpanOptions" block="vm.block" grid-columns="model.gridColumns"></umb-block-grid-column-editor>
                                    </div>
                                </div>
                            </div>

                            <!-- min/max Row span options -->
                            <div ng-if="vm.showSizeOptions" class="control-group umb-control-group -no-border">
                                <div class="umb-el-wrap">
                                    <label class="control-label" for="label"><localize key="blockEditor_allowedBlockRows">Available row spans</localize></label>
                                    <umb-property-info-button button-title-key="general_readMore">
                                        <localize key="blockEditor_allowedBlockRowsHelp">Define the range of layout rows this block is allowed to span across.</localize>
                                    </umb-property-info-button>
                                    <div class="controls">
                                        <umb-property-editor name="rowMinMaxModel" model="vm.rowMinMaxModel" is-pre-value="true"></umb-property-editor>
                                    </div>
                                </div>
                            </div>

                        </div>

                    </div>



                    <div class="umb-group-panel umb-block-grid-block-configuration__umb-group-panel">

                        <div class="umb-group-panel__header">
                            <localize key="blockEditor_headlineCatalogueAppearance">Catalogue appearance</localize>
                        </div>

                        <div class="umb-group-panel__content">

                            <button ng-if="!vm.showAppearanceOptions" type="button" class="btn-reset __settings-input --noValue umb-outline" style="height: 80px;" ng-click="vm.showAppearanceOptions = true">
                                <localize key="blockEditor_showAppearanceOptions">Show catalogue appearance</localize>
                            </button>

                            <!-- backgroundColor -->
                            <div ng-if="vm.showAppearanceOptions" class="control-group umb-control-group -no-border">
                                <div class="umb-el-wrap">
                                    <label class="control-label" for="backgroundColor"><localize key="blockEditor_labelBackgroundColor">Background Color</localize></label>
                                    <div class="controls">
                                        <umb-color-picker
                                            ng-model="vm.block.backgroundColor"
                                            options="vm.colorPickerOptions"
                                            on-change="vm.changeBackgroundColor(color)">
                                        </umb-color-picker>
                                    </div>
                                </div>
                            </div>

                            <!-- iconColor -->
                            <div ng-if="vm.showAppearanceOptions" class="control-group umb-control-group -no-border">
                                <div class="umb-el-wrap">
                                    <label class="control-label" for="iconColor"><localize key="blockEditor_labelIconColor">Icon Color</localize></label>
                                    <div class="controls">
                                        <umb-color-picker
                                            ng-model="vm.block.iconColor"
                                            options="vm.colorPickerOptions"
                                            on-change="vm.changeIconColor(color)">
                                        </umb-color-picker>
                                    </div>
                                </div>
                            </div>

                            <!-- thumbnail -->
                            <div ng-if="vm.showAppearanceOptions" class="control-group umb-control-group -no-border">
                                <div class="umb-el-wrap">
                                    <label class="control-label" for="iconcolor"><localize key="blockEditor_thumbnail">Thumbnail</localize></label>
                                    <div class="controls">
                                        <div class="__settings-input --hasValue" ng-if="vm.block.thumbnail !== null" >

                                            <umb-node-preview icon="'icon-document'" name="vm.block.thumbnail"></umb-node-preview>
                                            <div class="__control-actions">
                                                <button type="button" class="btn-reset __control-actions-btn --remove umb-outline" ng-click="vm.removeThumbnailForBlock(vm.block)">
                                                    <umb-icon icon="icon-wrong" class="icon"></umb-icon>
                                                </button>
                                            </div>
                                        </div>
                                        <button type="button" class="btn-reset __settings-input --noValue --hideText umb-outline" ng-if="vm.block.thumbnail === null" ng-click="vm.addThumbnailForBlock(vm.block)">
                                            <localize key="blockEditor_addThumbnail">Add thumbnail</localize>
                                        </button>
                                    </div>
                                </div>
                            </div>

                        </div>

                    </div>


                    <div class="umb-group-panel umb-block-grid-block-configuration__umb-group-panel">

                        <div class="umb-group-panel__header">
                            <localize key="blockEditor_headlineAllowance">Allowance</localize>
                        </div>

                        <div class="umb-group-panel__content">

                            <!-- allowAtRoot -->
                            <div class="control-group umb-control-group -no-border">
                                <div class="umb-el-wrap">
                                    <label class="control-label" for="allowAtRoot"><localize key="blockEditor_allowBlockInRoot">Allow in root</localize></label>
                                    <umb-property-info-button button-title-key="general_readMore">
                                        <localize key="blockEditor_allowBlockInRootHelp">Make this block available in the root of the layout.</localize>
                                    </umb-property-info-button>
                                    <div class="controls">
                                        <umb-toggle
                                            input-id="allowAtRoot"
                                            checked="vm.block.allowAtRoot"
                                            on-click="vm.block.allowAtRoot = !vm.block.allowAtRoot || false">
                                        </umb-toggle>
                                    </div>
                                </div>
                            </div>


                            <!-- allowInAreas -->
                            <div class="control-group umb-control-group -no-border">
                                <div class="umb-el-wrap">
                                    <label class="control-label" for="allowInAreas"><localize key="blockEditor_allowBlockInAreas">Allow in areas</localize></label>
                                    <umb-property-info-button button-title-key="general_readMore">
                                        <localize key="blockEditor_allowBlockInAreasHelp">Make this block available within other Blocks.</localize>
                                    </umb-property-info-button>
                                    <div class="controls">
                                        <umb-toggle
                                            input-id="allowInAreas"
                                            checked="vm.block.allowInAreas"
                                            on-click="vm.block.allowInAreas = !vm.block.allowInAreas || false">
                                        </umb-toggle>
                                    </div>
                                </div>
                            </div>

                        </div>

                    </div>

                </div>

                <div ng-if="vm.activeTab.alias === 'areas'">

                    <div class="umb-group-panel umb-block-grid-block-configuration__umb-group-panel --span-two-cols">


                        <div class="umb-group-panel__header">
                            <localize key="blockEditor_areas">Areas</localize>
                        </div>

                        <div class="umb-group-panel__content">

                            <!-- areaGridColumns -->
                            <div class="control-group umb-control-group -no-border">
                                <div class="umb-el-wrap">
                                    <label class="control-label" for="label"><localize key="blockEditor_areasLayoutColumns">Area layout columns</localize></label>
                                    <umb-property-info-button button-title-key="general_readMore">
                                        <localize key="blockEditor_areasLayoutColumnsHelp">Define how many layout columns that will be available for areas. If not defined, the number of layout columns defined for the entire layout will be used.</localize>
                                    </umb-property-info-button>
                                    <div class="controls">
                                        <input type="text" name="label" placeholder="{{model.gridColumns}}" ng-model="vm.block.areaGridColumns"/>
                                    </div>
                                </div>
                            </div>

                            <!-- areas -->
                            <div class="control-group umb-control-group -no-border">
                                <div class="umb-el-wrap">
                                    <label class="control-label" for="label"><localize key="blockEditor_areasConfigurations">Area configurations</localize></label>
                                    <umb-property-info-button button-title-key="general_readMore">
                                        <localize key="blockEditor_areasConfigurationsHelp">To enable nesting of blocks within this block, define one or more areas for blocks to be nested within. Areas follow their own layout witch is defined by the Area Layout Columns. Each Areas column and row span can be adjusted by using the scale-handler in the bottom right.</localize>
                                    </umb-property-info-button>
                                    <div class="controls">
                                        <umb-block-grid-area-editor model="vm.block.areas" block="vm.block" grid-columns="model.gridColumns" all-block-types="model.allBlockTypes" all-block-groups="model.allBlockGroups" loaded-element-types="model.loadedElementTypes"></umb-block-grid-area-editor>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>

                <div ng-if="vm.activeTab.alias === 'advance'">
                    <div class="umb-group-panel umb-block-grid-block-configuration__umb-group-panel">

                        <div class="umb-group-panel__header">
                            <localize key="blockEditor_headlineAdvanced">Advanced</localize>
                        </div>

                        <div class="umb-group-panel__content">

                            <!-- custom view -->
                            <div class="control-group umb-control-group -no-border">
                                <div class="umb-el-wrap">
                                    <label class="control-label" for="iconcolor"><localize key="blockEditor_labelCustomView">Custom view</localize></label>
                                    <umb-property-info-button button-title-key="blockEditor_labelCustomViewInfoTitle">
                                        <localize key="blockEditor_labelCustomViewDescription">Overwrite how this block appears in the BackOffice UI. Pick a .html file containing your presentation.</localize>
                                    </umb-property-info-button>
                                    <div class="controls">
                                        <div class="__settings-input --hasValue" ng-if="vm.block.view !== null" >

                                            <umb-node-preview icon="'icon-document'" name="vm.block.view"></umb-node-preview>
                                            <div class="__control-actions">
                                                <button type="button" class="btn-reset __control-actions-btn --remove umb-outline" ng-click="vm.requestRemoveViewForBlock(vm.block)">
                                                    <umb-icon icon="icon-wrong" class="icon"></umb-icon>
                                                </button>
                                            </div>
                                        </div>
                                        <button type="button" class="btn-reset __settings-input --noValue --hideText umb-outline" ng-if="vm.block.view === null" ng-click="vm.addViewForBlock(vm.block)">
                                            <localize key="blockEditor_addCustomView">Add custom view</localize>
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <!-- custom stylesheet -->
                            <div class="control-group umb-control-group -no-border">
                                <div class="umb-el-wrap">
                                    <label class="control-label" for="iconcolor"><localize key="blockEditor_labelCustomStylesheet">Custom stylesheet</localize></label>
                                    <div class="controls">
                                        <div class="__settings-input --hasValue" ng-if="vm.block.stylesheet !== null" >

                                            <umb-node-preview icon="'icon-document'" name="vm.block.stylesheet"></umb-node-preview>
                                            <div class="__control-actions">
                                                <button type="button" class="btn-reset __control-actions-btn --remove umb-outline" ng-click="vm.requestRemoveStylesheetForBlock(vm.block)">
                                                    <umb-icon icon="icon-wrong" class="icon"></umb-icon>
                                                </button>
                                            </div>
                                        </div>
                                        <button type="button" class="btn-reset __settings-input --noValue --hideText umb-outline" ng-if="vm.block.stylesheet === null" ng-click="vm.addStylesheetForBlock(vm.block)">
                                            <localize key="blockEditor_addCustomStylesheet">Add custom stylesheet</localize>
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <!-- editor overlay size -->
                            <div class="control-group umb-control-group -no-border">
                                <div class="umb-el-wrap">
                                    <label class="control-label" for="editorSize"><localize key="blockEditor_labelEditorSize">Editor size</localize></label>
                                    <div class="controls">
                                        <select id="editorSize" ng-model="vm.block.editorSize">
                                            <option value="small">Small</option>
                                            <option value="medium">Medium</option>
                                            <option value="large">Large</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <!-- forceHideContentEditorInOverlay -->
                            <div class="control-group umb-control-group -no-border">
                                <div class="umb-el-wrap">
                                    <label class="control-label" for="forceHideContentEditorInOverlay"><localize key="blockEditor_forceHideContentEditor">Hide content editor</localize></label>
                                    <umb-property-info-button button-title-key="general_readMore">
                                        <localize key="blockEditor_forceHideContentEditorHelp">Define the range of layout rows this block is allowed to span across.</localize>
                                    </umb-property-info-button>
                                    <div class="controls">
                                        <umb-toggle checked="vm.block.forceHideContentEditorInOverlay" on-click="vm.block.forceHideContentEditorInOverlay = vm.block.forceHideContentEditorInOverlay != true"></umb-toggle>
                                    </div>
                                </div>
                            </div>

                        </div>

                    </div>
                </div>

            </umb-editor-container>

            <umb-editor-footer>

                <umb-editor-footer-content-right>

                    <umb-button
                        action="vm.close()"
                        shortcut="esc"
                        button-style="link"
                        label-key="general_close"
                        type="button">
                    </umb-button>

                    <umb-button
                        action="vm.submit()"
                        button-style="primary"
                        state="submitButtonState"
                        label-key="buttons_submitChanges"
                        type="button">
                    </umb-button>

                </umb-editor-footer-content-right>

            </umb-editor-footer>
        </umb-editor-view>
    </form>
</div>