<div ng-controller="Umbraco.PropertyEditors.BlockGrid.BlockConfigurationAreaOverlayController as vm">

    <form novalidate name="blockGridBlockConfigurationAreaForm" val-form-manager>

        <umb-editor-view ng-if="!page.loading">

            <umb-editor-header
                name="model.title"
                name-locked="true"
                hide-alias="true"
                hide-icon="true"
                hide-description="true">
            </umb-editor-header>

            <umb-editor-container>
                <div class="form-vertical umb-block-grid-block-configuration-layout">

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

                        <div class="umb-group-panel__header">
                            <localize key="blockEditor_areaIdentification">Identification</localize>
                        </div>

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

                            <!-- alias -->
                            <div class="control-group umb-control-group -no-border">
                                <div class="umb-el-wrap">
                                    <label class="control-label" for="alias"><localize key="general_alias">Alias</localize></label>
                                    <umb-property-info-button button-title-key="general_readMore">
                                        <localize key="blockEditor_areaAliasHelp">The alias will be printed by GetBlockGridHTML(), use the alias to target the Element representing this area. Ex. .umb-block-grid__area[data-area-alias="MyAreaAlias"] { ... }</localize>
                                    </umb-property-info-button>
                                    <div class="controls">
                                        <input type="text" name="alias" ng-model="vm.area.alias" style="width:100%" umb-auto-focus/>
                                    </div>
                                </div>
                            </div>

                            <!-- createLabel -->
                            <div class="control-group umb-control-group -no-border">
                                <div class="umb-el-wrap">
                                    <label class="control-label" for="createLabel"><localize key="blockEditor_areaCreateLabelTitle">Create Button Label</localize></label>
                                    <umb-property-info-button button-title-key="general_readMore">
                                        <localize key="blockEditor_areaCreateLabelHelp">Overwrite the label on the create button of this Area.</localize>
                                    </umb-property-info-button>
                                    <div class="controls">
                                        <input type="text" name="createLabel" ng-model="vm.area.createLabel" style="width:100%" umb-auto-focus/>
                                    </div>
                                </div>
                            </div>

                        </div>

                    </div>

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

                        <div class="umb-group-panel__header">
                            <localize key="blockEditor_areaValidation">Validation</localize>
                        </div>

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

                            <!-- min/max -->
                            <div class="control-group umb-control-group -no-border">
                                <div class="umb-el-wrap">
                                    <label class="control-label" for="minMaxEditor"><localize key="blockEditor_areaNumberOfBlocks">Number of blocks</localize></label>
                                    <div class="controls">
                                        <umb-property-editor name="minMaxEditor" model="vm.minMaxModel" is-pre-value="true"></umb-property-editor>
                                    </div>
                                </div>
                            </div>

                            <!-- specifiedAllowance -->
                            <div class="control-group umb-control-group -no-border">
                                <div class="umb-el-wrap">
                                    <label class="control-label"><localize key="blockEditor_areaAllowedBlocks">Allowed block types</localize></label>
                                    <umb-property-info-button button-title-key="general_readMore">
                                        <localize key="blockEditor_areaAllowedBlocksHelp">Define the types of blocks that are allowed in this area, and optionally how many of each type that should be present.</localize>
                                    </umb-property-info-button>
                                    <div class="controls">
                                        <umb-block-grid-area-allowance-editor model="vm.area.specifiedAllowance" all-block-types="model.allBlockTypes" all-block-groups="model.allBlockGroups" loaded-element-types="model.loadedElementTypes"></umb-block-grid-area-allowance-editor>
                                    </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>
