<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">

                    <div class="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">

                        <div class="umb-group-panel__header">
                            <localize key="blockEditor_headlineAllowance">Permissions</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 class="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>

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

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


                        <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="areaGridColumns"><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="number" pattern="[0-9]*" min="1" max="100" name="areaGridColumns" placeholder="{{model.gridColumns}}" ng-model="vm.block.areaGridColumns" fix-number />
                                    </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 the nesting of blocks within this block, define one or more areas. Areas follow the layout defined by their own grid column configuration. The 'column span' and 'row span' for each area can be adjusted by using the scale-handler box in the bottom right hand corner of the selected area.</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">

                        <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>

                            <!-- inlineEditing -->
                            <div class="control-group umb-control-group -no-border">
                                <div class="umb-el-wrap">
                                    <label ng-attr-disabled="{{(vm.block.view !== null) || undefined}}" class="control-label" for="inlineEditing"><localize key="blockEditor_gridInlineEditing">Inline editing</localize></label>
                                    <umb-property-info-button ng-if="vm.block.view === null" button-title-key="general_readMore">
                                        <localize key="blockEditor_gridInlineEditingHelp">Hide the content edit button and the content editor from the Block Editor overlay.</localize>
                                    </umb-property-info-button>
                                    <div class="controls">
                                        <umb-toggle checked="(vm.block.view === null ? vm.block.inlineEditing : false)" disabled="vm.block.view !== null" on-click="vm.block.inlineEditing = vm.block.inlineEditing != true"></umb-toggle>
                                    </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">Hide the content edit button and the content editor from the Block Editor overlay.</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 class="umb-group-panel">

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

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

                            <!-- backgroundColor -->
                            <div 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 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 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>

            </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>