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

                    <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>
                                    <strong class="umb-control-required">*</strong>
                                    <umb-property-info-button button-title-key="general_readMore">
                                      <localize key="blockEditor_areaAliasHelp">When using GetBlockGridHTML() to render the Block Grid, the alias will be rendered in the markup as a 'data-area-alias' attribute. Use the alias attribute to target the element for the area. Example. .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" val-server="alias" style="width:100%" required umb-auto-focus/>
                                    </div>
                                    <div ng-messages="blockGridBlockConfigurationAreaForm.alias.$error" class="red">
                                        <div ng-message="alias">
                                            <localize key="blockEditor_areaAliasIsNotUnique" tokens="[vm.area.alias]" watch-tokens="true">This Areas Alias must be unique compared to the other Areas of this Block.</localize>
                                        </div>
                                        <span ng-message="valServer" ng-bind-html="blockGridBlockConfigurationAreaForm.alias.errorMsg"></span>
                                    </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">Override the label text for adding a new Block to this Area, Example: 'Add Widget'</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>
